一个简单的页面弹窗插件 jquery.pageMsgFrame.js

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

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

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

html代码:


 1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>jQuery.pageMsgFrame</title>
6 <script src="jquery-1.7.2.min.js"></script>
7 <script src="jQuery.pageMsgFrame.js"></script>
8 </head>
9 <style>
10 *{ margin: 0;padding: 0;}
11 .msg { height: 180px; width: 400px; position: absolute; top: 240px; left: 50%; margin-left: -200px; background: #f00; color: #fff; z-index: 3;}
12 a{ color: #fff;}
13 button { margin: 10px;}
14 </style>
15 <body>
16 <button id="show">show</button>
17 <button id="fade">fade</button>
18 <button id="slideDown">slideDown</button>
19
20
21 <div class="msg" style="display:none;">
22 <p align="right"><a class="close" href="javascript:void(0);">关闭</a></p>
23 <p class=‘content‘>内容</p>
24 <p><a class="submit" href="javascript:void(0);">确定</a> <a class="close" href="javascript:void(0);">取消</a></p>
25 </div>
26
27 <script>
28 $(function(){
29 $(window).pageMsgFrame({objFrame:‘.msg‘,showBtn:‘#show‘,closeBtn:‘.close‘,effect:‘normal‘,timer:400});
30 $(window).pageMsgFrame({objFrame:‘.msg‘,showBtn:‘#fade‘,closeBtn:‘.close‘,effect:‘fade‘,timer:600});
31 $(window).pageMsgFrame({objFrame:‘.msg‘,showBtn:‘#slideDown‘,closeBtn:‘.close‘,effect:‘slide‘,timer:400});
32 })
33
34 </script>
35 </body>
36 </html>

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

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

  • objFrame-显示哪个模块

  • showBtn-显示弹窗按钮

  • closeBtn-关闭弹窗按钮

jQuery插件:


 1 /*
2 * jQuery.pageMsgFrame.js
3 * v.1.0
4 * 2014-05-12
5 * derek sun
6 */
7 (function($){
8
9 $.fn.pageMsgFrame = function(option){
10 //默认参数列表
11 var settings = {
12 showBtn:‘‘,
13 closeBtn:‘‘,
14 submitBtn:‘‘,
15 objFrame:‘‘,
16 effect:‘‘,
17 //effect包含 normal fade slide
18
19 _before:function(){
20 $.noop();
21 },
22 _after:function(){
23 $.noop();
24 },
25 _submit:function(){
26 $.noop();
27 },
28 _ajax:function(){
29 $.noop();
30 },
31 timer:0
32 };
33
34 var opts = $.extend(settings,option,{});
35
36 //show
37 $(opts.showBtn).live(‘click‘,function(){
38 opts._before();
39 showPageFrameLayer();
40 showFrame();
41 })
42
43 //hide
44 $(opts.closeBtn).live(‘click‘,function(){
45 $(opts.objFrame).add(‘.pageFrameLayer‘).fadeOut();
46 $(".pageFrameLayer").remove();
47 opts._after();
48 })
49
50 //_ajax
51 $(opts.submitBtn).live(‘click‘,function(){
52 opts._ajax();
53 })
54
55 function showFrame(){
56 switch(opts.effect){
57 case ‘normal‘:
58 opts.timer?$(opts.objFrame).show(opts.timer):$(opts.objFrame).show();
59 break;
60
61 case ‘fade‘:
62 opts.timer?$(opts.objFrame).fadeIn(opts.timer):$(opts.objFrame).fadeIn();
63 break;
64
65 case ‘slide‘:
66 opts.timer?$(opts.objFrame).slideDown(opts.timer):$(opts.objFrame).slideDown();
67 break;
68
69 default:
70 $(opts.objFrame).show();
71 break;
72 }
73 }
74
75 function showPageFrameLayer(){
76 if(!$(".pageFrameLayer").length){
77 $("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>‘);
78 }
79 }
80
81 }
82
83 })(jQuery)

一个简单的页面弹窗插件 jquery.pageMsgFrame.js,布布扣,bubuko.com

时间: 05-14

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

页面滚动图片等元素动态加载插件jquery.scrollLoading.js

如果一个网页很长,那么该页面的加载时间也会相应的较长.而这里给大家介绍的这个jQuery插件scrollLoading的作用则是,对页面元素进行动态加载,通俗的说就是滚到哪就加载到哪,屏幕以下看不见的就不用加载了.这样还可以在一定程度上节省服务器资源.该插件作者的网页将该插件的功能和使用方法描述的非常详细,这里把最一般最普遍的使用情况给大家展现一下. 插件作者:http://www.zhangxinxu.com/ 首先我们需要加载jQuery库和本插件js文件. (jquery.scrollLo

利用JS跨域做一个简单的页面访问统计系统

其实在大部分互联网web产品中,我们通常会用百度统计或者谷歌统计分析系统,通过在程序中引入特定的JS脚本,然后便可以在这些统计系统中看到自己网站页面具体的访问情况.但是有些时候,由于一些特殊情况,我们需要自己来设计统计系统.由于前段时间公司的业务需求,我也是自己尝试了下,本文提供的是一个基本思路,统计系统也比较简单. 几个基本统计需求: 1.统计web每个页面用户访问量 2.统计用户访问者的和IP地址信息 3.页面之间的跳转情况 4.访问高峰时间段 服务器结构: 数据库表设计: 以上只是我简单列

浮动布局写了一个简单的页面

正在学习的路上...... 这两天写了一个比较简单的页面,主要使用了浮动和定位.左边的属于滚动页面,右边的list属于固定.先上图片: 主要使用了float:left/right. 1.下面是HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link type="

Spring Aop 实现一个简单的memcached小插件

memcached我就不多做介绍了,也就是一个分布式缓存系统!是一个典型的NOSQL. 下面我将用spring aop来实现一个简单的插件,来实现annotation方式,简单方便的取得缓存 一.首先我们得定义一个annotation. <strong>package org.xiezhaodong.spring.annotation; import java.lang.annotation.Documented; import java.lang.annotation.ElementType

jQuery图片切换插件jquery.cycle.js

Cycle是一个很棒的jQuery图片切换插件,提供了很好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <head> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src

jQuery表单插件jquery.form.js

概述 jQuery Form Plugin能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单. 插件里面主要的方法, ajaxForm和ajaxSubmit,能够从form组件里采集信息确定如何处理表单的提交过程. 两个方法都支持众多的可选参数,能够让你对表单里数据的提交做到完全的控制. 入门指导 一.在你的页面里写一个表单.一个普通的表单,不需要任何特殊的标记: <form id="myForm" action="login.action&quo

jquery二维码生成插件jquery.qrcode.js

插件描述:jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码. 转载于:http://www.jq22.com/jquery-info294 如何使用它 将jquery.qrcode.min.js和jquery添加到您的网页中 <script src="jquery.min.js"></script> <script type="text/javascrip

jQuery延迟加载(懒加载)插件 – jquery.lazyload.js

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担. Demo页面: 基本选项 淡入效果 对不支持JavaScript浏览器的降级处理 水平滚动 容器内水平滚动 容器内垂直滚动 页

jQuery插件 -- Form表单插件jquery.form.js

jquery.form.js官网 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到决定如何管理提交进程的功能.另外,插件还包括其他的一些方法: formToArray().formSerialize().fieldSerialize().fieldValue().clearForm(). clearFields