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

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

原创博文，转载请注明出处：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. 在jsp页面动态添加数据库中的内容

    工具:myeclipse+oracle11g 1.首先新建一个jsp页面. 2.在src目录下新建实体类User.java 3.创建BaseDao用来链接数据库 4.在pl/sql中创建存储过程 5. ...

  2. JAVA并发-线程状态

    一.线程基本状态 新建:线程已创建但start()方法还没执行 就绪(可运行):start()方法已运行,但还没被选择 运行:从就绪线程中选择出某一个线程进行run()操作 阻塞(不可运行):线程正在 ...

  3. oracle在线迁移同步数据，数据库报错

    报需要升级的错误,具体处理步骤如下: 一.错误信息 SQL> alter database open ;alter database open resetlogs*ERROR at line 1 ...

  4. java中反射的基本使用

    fanShe.java package example5;class fanShe{    /*1.应用在一些通用性比较高的代码中.     *2.后面学的框架,大多数都是应用框架来实现的.     ...

  5. jQuery 常用核心方法

    jQuery 常用核心方法 .each() 遍历一个jQuery对象,为每个匹配元素执行一个函数 $('p').each(function(idx,node){ $(node).text(idx + ...

  6. itertools.groupby()分组字典列表

    ## itertools.groupby()分组字典列表数据 from operator import itemgetter from itertools import groupby student ...

  7. 分清clientY pageY screenY layerY offsetY的区别

    分清clientY pageY screenY layerY offsetY的区别 在我们想要做出拖拽这个效果的时候,我们需要分清这几个属性的区别,这几个属性都是计算鼠标点击的偏移值,我们需要对其进行 ...

  8. Go Web 问题集-持续更新

    前端: 导入静态js,css报错,在确保js和css语法编写正确的前提下 GET   错误:          等问题 1.在服务器中运行:静态服务文件路径设置错误 2.本地运行:相对路径设置错误 3 ...

  9. 【blockly教程】第二章 Blockly编程基础

    2.1 Blockly的数据类型 2.1.1 数据的含义  在计算机程序的世界里,程序的基本任务就是处理数据,无论是数值还是文字.图像.图形.声音.视频等信息,如果要在计算机中处理的话,就必须将它们转 ...

  10. Git Status 中文乱码解决

    现象: jb@H39:~/doc$ git statusOn branch masterYour branch is up-to-date with 'origin/master'. Untracke ...