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

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

原创博文，转载请注明出处：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. 如何不使用 submit 按钮来提交表单？

      如果我们不想用 submit 按钮来提交表单,我们也可以用超链接来提交,我们可以这样写代码: <a href=”javascript: document.myform.submit ();” ...

  2. WebPack系列之Proxy

    背景 当我们直接去访问https://m.weibo.cn/api/config/list时由于端口.域名的不同产生了跨域,无法请求到资源数据. 分析 WebPack中devServer的proxy代 ...

  3. Python字符串必记函数

    Python字符串函数数不胜数,想要记完所有几乎不可能,下列几个是极为重要的一些函数,属于必记函数. 一.join 功能: 将字符串.元组.列表中的元素以指定的字符(分隔符)连接生成一个新的字符串 语 ...

  4. Android小例子：使用反射机制来读取图片制作一个图片浏览器

    效果图: 工程文件夹: 该例子可供于新手参考练习,如果有哪里不对的地方,望指正>-< <黑幕下的人> java代码(MainActivity.java): package co ...

  5. Oracle_11g桌面版 中解决被锁定的scott 教学数据库的方法

    Oracle 11g中修改被锁定的用户:scott 在安装完Oracle10g和创建完oracle数据库之后,想用数据库自带的用户scott登录,看看连接是否成功. 在cmd命令中,用“sqlplus ...

  6. sample采样倾斜key并单独进行join代码

    /** * sample采样倾斜key单独进行join */ JavaPairRDD<Long, String> sampledRDD = userid2PartAggrInfoRDD.s ...

  7. 网站用户行为分析——HBase的安装与配置

    Hbase介绍 HBase是一个分布式的.面向列的开源数据库,源于Google的一篇论文<BigTable:一个结构化数据的分布式存储系统>.HBase以表的形式存储数据,表有行和列组成, ...

  8. Python编程从入门到实践，个人笔记

    3-9 晚餐嘉宾:在完场练习3-6时编写的程序之一中,使用len()打印一条消息,指出有多少位嘉宾来与你共进晚餐. 自己先写的程序如下: # coding=gbk #邀请一些人吃饭 per_list= ...

  9. 『Python基础-9』元祖 (tuple)

    『Python基础-9』元祖 (tuple) 目录: 元祖的基本概念 创建元祖 将列表转化为元组 查询元组 更新元组 删除元组 1. 元祖的基本概念 元祖可以理解为,不可变的列表 元祖使用小括号括起所 ...

  10. C++实现json字符串与map的转换

    开源资源库 jsoncpp-src-0.5.0.tar.gz:https://sourceforge.net/projects/jsoncpp/ jsoncpp-master.ziphttps://g ...