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

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

原创博文，转载请注明出处：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. 安装 git,并创建版本库 记录一下

    参考大神网址: http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/001374325 ...

  2. 架构模式：MVC与MVVM

    本文探讨如下几个问题: 什么是MVC 什么是MVVM MVC与MVVM对架构属性的影响 MVC实例SpringMVC MVVM实例Vue MVC.MVVM与Layer中的Model,Controlle ...

  3. private、protected、public和internal的区别

    private是完全私有的,只有在类自己里面可以调用,在类的外部和子类都不能调用,子类也不能继承父类的private的属性和方法. protected虽然可以被外界看到,但外界却不能调用,只有自己及自 ...

  4. Jquery中on绑定事件 点击一次 执行多次 的解决办法

    举个例子,在同一个页面有下拉选择框 <select class="mySelect"> <option value="user">按用户 ...

  5. 通过xshell在linux上安装mysql5.7（终极版）

    通过xshell在linux上安装mysql5.7(终极版) 0)通过xshell连接到远程服务器 1)彻底删除原来安装的mysql 首先查看:rpm -qa|grep -i mysql 删除操作(一 ...

  6. cut 的用法

    cut 文件内容查看 显示行中的指定部分,删除文件中指定字段 显示文件的内容,类似于下的type命令. 说明 该命令有两项功能,其一是用来显示文件的内容,它依次读取由参数file所指明的文件,将它们的 ...

  7. Java Web项目里 classpath 具体指哪个路径

    classpath路径指什么 只知道把配置文件如:mybatis.xml.spring-web.xml.applicationContext.xml等放到src目录(就是存放代码.java文件的目录) ...

  8. day 13 内置函数

    内置函数思维导图:https://www.processon.com/view/link/5c13ad2de4b0ed122da75668 内置函数 作用域相关:   locals() 返回当前作用域 ...

  9. Flink实例-Wordcount详细步骤

    link实例之Wordcount详细步骤 1.我的IDE是IntelliJ IDEA.在官网上https://www.jetbrains.com/idea/下载最新版2018.2的IDEA,如下图.破 ...

  10. 10种简单的Java性能优化

    你是否正打算优化hashCode()方法?是否想要绕开正则表达式?Lukas Eder介绍了很多简单方便的性能优化小贴士以及扩展程序性能的技巧. 最近“全网域(Web Scale)”一词被炒得火热,人 ...