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

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

原创博文，转载请注明出处：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. STM32F103 ucLinux开发之二（内核启动汇编代码分析)

    start_kernel之前的汇编代码分析 Boot中执行下面两句话之后,进入uclinux内核. theKernel = (void (*)(int, int, unsigned int))((ui ...

  2. ORACLE学习之三

    DDL 数据定义语言 CREATE ALTER DROP DML 数据操作语言 INSERT UPDATE DELETE DQL 数据查询语言 SELECT TCL 事务控制语言 COMMIT ROL ...

  3. Windows系统常见问题

    1.Windows自动更新灰色不能修改HKEY_LOCAL_MACHINE/Software/Policies/Microsoft/WindowsWindowsUpdate的资料夹,在WindowsU ...

  4. Jquery中数值求和及根据余数改变对应的数值样式

    Jquery内容 <script type="text/javascript"> $(function () { var num = 0; $(".box o ...

  5. 【Spark】源码分析之spark-submit

    在客户端执行脚本sbin/spark-submit的时候,通过cat命令查看源码可以看出,实际上在源码中将会执行bin/spark-class org.apache.spark.deploy.Spar ...

  6. git创建使用1https://blog.csdn.net/Hanani_Jia/article/details/77950594

    这篇文章是我自己写的关于GitHub的内容,从我刚听到这个直到设置成功每一步都有详细的步骤来解释,其中有一些截图或者代码来自于网上. 首先,我先对GitHub来一个简单的介绍,GitHub有一个很强大 ...

  7. 使用NPOI将数据导出Excel

    NPOI.HSSF.UserModel.HSSFWorkbook book = new NPOI.HSSF.UserModel.HSSFWorkbook(); NPOI.SS.UserModel.IS ...

  8. Python-变量与基础数据类型

    ·变量(variable)  笔记: 变量本质上是一个占位符.变量可以用来存储整数.字符串.列表等.简单的可以理解为一个座位,可以坐老人也可以坐小孩,可以坐男孩,也可以坐女孩. 在python里,标识 ...

  9. PAT A1127 ZigZagging on a Tree （30 分）

    Suppose that all the keys in a binary tree are distinct positive integers. A unique binary tree can ...

  10. PAT 1001 害死人不偿命的(3n+1)猜想

    1001 害死人不偿命的(3n+1)猜想 (15 分) 卡拉兹(Callatz)猜想: 对任何一个正整数 n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把 (3n+1) 砍掉一半.这样一直反复 ...