页面弹窗是网站中常用的交互效果，它可以强提示网站的某些信息给用户，或者作用于某些信息的修改等等功能。

这几天在做一个项目的时候，就顺捎把这个插件写一下，栽棵树，自己乘凉吧。

原创博文，转载请注明出处：http://www.cnblogs.com/dereksunok/p/3724764.html

html代码：

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8" />

 <title>jQuery.pageMsgFrame</title>

 <script src="jquery-1.7.2.min.js"></script>

 <script src="jQuery.pageMsgFrame.js"></script>

 </head>

 <style>

 *{ margin: 0;padding: 0;}

 .msg { height: 180px; width: 400px; position: absolute; top: 240px; left: 50%; margin-left: -200px; background: #f00; color: #fff; z-index: 3;}

 a{ color: #fff;}

 button { margin: 10px;}

 </style>

 <body>

 <button id="show">show</button>

 <button id="fade">fade</button>

 <button id="slideDown">slideDown</button>

 <div class="msg" style="display:none;">

     <p align="right"><a class="close" href="javascript:void(0);">关闭</a></p>

     <p class='content'>内容</p>

     <p><a class="submit" href="javascript:void(0);">确定</a> <a class="close" href="javascript:void(0);">取消</a></p>

 </div>

 <script>

 $(function(){

     $(window).pageMsgFrame({objFrame:'.msg',showBtn:'#show',closeBtn:'.close',effect:'normal',timer:400});

     $(window).pageMsgFrame({objFrame:'.msg',showBtn:'#fade',closeBtn:'.close',effect:'fade',timer:600});

     $(window).pageMsgFrame({objFrame:'.msg',showBtn:'#slideDown',closeBtn:'.close',effect:'slide',timer:400});

 })

 </script>

 </body>

 </html>

html代码中写明了三种不同状态的弹窗形式，show() 带时间参数的动画展示，fadeIn()展示，slideDown()展示。

必填的对象是objFrame:'.msg',showBtn:'#show',closeBtn:'.close'。

  • objFrame-显示哪个模块
  • showBtn-显示弹窗按钮
  • closeBtn-关闭弹窗按钮

jQuery插件：

 /*

  * jQuery.pageMsgFrame.js

  * v.1.0

  * 2014-05-12

  * derek sun

  */

 (function($){

     $.fn.pageMsgFrame = function(option){

         //默认参数列表

         var settings = {

             showBtn:'',

             closeBtn:'',

             submitBtn:'',

             objFrame:'',

             effect:'',

             //effect包含 normal fade slide

             _before:function(){

                 $.noop();

             },

             _after:function(){

                 $.noop();

             },

             _submit:function(){

                 $.noop();

             },

             _ajax:function(){

                 $.noop();

             },

             timer:0

         };

         var opts = $.extend(settings,option,{});

         //show

         $(opts.showBtn).live('click',function(){

             opts._before();

             showPageFrameLayer();

             showFrame();

         })

         //hide

         $(opts.closeBtn).live('click',function(){

             $(opts.objFrame).add('.pageFrameLayer').fadeOut();

             $(".pageFrameLayer").remove();

             opts._after();

         })

         //_ajax

         $(opts.submitBtn).live('click',function(){

             opts._ajax();

         })

         function showFrame(){

             switch(opts.effect){

                 case 'normal':

                     opts.timer?$(opts.objFrame).show(opts.timer):$(opts.objFrame).show();

                 break;

                 case 'fade':

                     opts.timer?$(opts.objFrame).fadeIn(opts.timer):$(opts.objFrame).fadeIn();

                 break;

                 case 'slide':

                     opts.timer?$(opts.objFrame).slideDown(opts.timer):$(opts.objFrame).slideDown();

                 break;

                 default:

                     $(opts.objFrame).show();

                 break;

             }

         }

         function showPageFrameLayer(){

             if(!$(".pageFrameLayer").length){

                 $("body").append('<div class="pageFrameLayer" style="height:100%; width: 100%; position: absolute; top:0; left:0; bottom:0; right:0; background: #000; opacity:0.4; z-index: 1; "></div>');

             }

         }

     }

 })(jQuery)

一个简单的页面弹窗插件 jquery.pageMsgFrame.js的更多相关文章

  1. 优秀的弹窗插件 jquery.lightbox_me.js

    项目地址: https://github.com/buckwilson/Lightbox_me用法:http://buckwilson.me/lightboxme/ var opt = { 'cent ...

  2. 从0开始写一个简单的vite hmr 插件

    从0开始写一个简单的vite hmr 插件 0. 写在前面 在构建前端项目的时候,除开基本的资源格式(图片,json)以外,还常常会需要导入一些其他格式的资源,这些资源如果没有第三方vite插件的支持 ...

  3. 一个简单的MariaDB认证插件demo

    代码地址如下:http://www.demodashi.com/demo/13076.html 一.前言 众所周知(其实可能很多人不知道)MariaDB支持插件认证.在MariaDB中新建用户,常见的 ...

  4. 动态生成二维码插件 jquery.qrcode.js

    前段时间做项目,需要动态生成一个二维码,于是就在网上找了一下发现一个jquery插件jquery.qrcode.js,所以今天就简单说一下这个插件的使用: jquery.qrcode.js是依赖jqu ...

  5. jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明

    jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...

  6. jQuery懒加载插件jquery.lazyload.js使用说明实例

    jQuery懒加载插件jquery.lazyload.js使用说明实例很多网站都会用到‘图片懒加载’这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片.懒加载原理:浏览器会自动对页面中 ...

  7. jQuery插件 -- 表单验证插件jquery.validate.js, jquery.metadata.js

    原文地址:http://blog.csdn.net/zzq58157383/article/details/7718352   最常使用JavaScript的场合就是表单的验证,而jQuery作为一个 ...

  8. jQuery响应式幻灯片插件jquery.glide.js（支持触摸&轻量级）

    找到一款好的幻灯片插件不容易,找到一款功能全并且使用很简单的幻灯片更不容易,今天为大家分享一款全能的幻灯片插件glide.js,也是我现在在使用的一款插件. jquery.glide.js是响应和触摸 ...

  9. jQuery滚动条插件 – jquery.slimscroll.js

    jquery.slimscroll.js插件是一个支持把内容放在一个盒子里面,固定一个高度,超出的则使用滚动.jquery.slimscroll.js不仅可以定义高度.宽度,还可以定义位置.滚动条大小 ...

随机推荐

  1. 搭建python开发平台

    转:http://www.cnblogs.com/xuqiang/archive/2011/04/18/2019484.html <1>. 建立Python的开发环境; 这里使用的Pyth ...

  2. ubuntu上建立本地git 和 网络 github的上传与下载

    github工具是一个很好用的工具,可以在本地建立一个git仓库,存储当前写的程序或者数据,然后通过ssh与github建立联系.具体怎么实现,下面进行介绍. 1.首先要安装git 软件 在Linux ...

  3. var let const的一些区别

    var let const 都是来定义变量的. var let 作用域有些区别. const 类似于java中的常量的概念.即:只能给一个变量赋值一次,即指定一个引用. 举例来说: function ...

  4. Vue.js与 ASP.NET Core 服务端渲染功能整合

    http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/ 原作者:Mihály Gyöngyösi 译者:oop ...

  5. 洛谷P4383 [八省联考2018]林克卡特树lct(DP凸优化/wqs二分)

    题目描述 小L 最近沉迷于塞尔达传说:荒野之息(The Legend of Zelda: Breath of The Wild)无法自拔,他尤其喜欢游戏中的迷你挑战. 游戏中有一个叫做“LCT” 的挑 ...

  6. 笔记： 对称加密算法的PKCS5 和 PKCS7 填充

    PKCS #7 填充字符串由一个字节序列组成,每个字节填充该填充字节序列的长度. 假设,块的长度是 8, 数据长度是 5 数据:AA AA AA AA AA PKCS#7 填充 AA AA AA AA ...

  7. Oracle条件判断列数量非where

    sum(case when typename='测试' then 1 else 0 end)

  8. jQuery实现 自动滚屏操作

    实现自动滚屏思路: 1.滚屏即:文本的往上移动一段距离: 2.那么我们使文本每过一段时间就往上移动一段固定距离,就可实现滚屏: 3.直到文本底部出现在浏览器窗口中,专业点就是 文本移动的距离 + 浏览 ...

  9. jQuery语法、选择器、效果等使用

    1．jQuery语法 1.1 基础语法:$(selector).action( ) 美元符号定义 jQuery 选择符(selector)“查询”和“查找” HTML 元素 jQuery 的 acti ...

  10. window安装ubuntu系统