jquery.prompt.js 弹窗的使用

 1 /***
 2  * Prompt提示语插件
 3  * 编写时间:2013年4月8号
 4  * version:Prompt.1.0.js
 5  * author:小宇<[email protected]>
 6 ***/
 7 (function($){
 8         $.extend({
 9             PromptBox:{
10                 defaults : {
11                     name  :    "T"+ new Date().getTime(),
12                     content :"This is tips!",                            //弹出层的内容(text文本、容器ID名称、URL地址、Iframe的地址)
13                     width : 200,                                    //弹出层的宽度
14                     height : 70,
15                     time:2000,//设置自动关闭时间,设置为0表示不自动关闭
16                     bg:true
17                 },
18                 timer:{
19                     stc:null,
20                     clear:function(){
21                         if(this.st)clearTimeout(this.st);
22                         if(this.stc)clearTimeout(this.stc);
23                         }
24                 },
25                 config:function(def){
26                     this.defaults = $.extend(this.defaults,def);
27                 },
28                 created:false,
29                 create : function(op){
30                     this.created=true;
31                     var ops = $.extend({},this.defaults,op);
32                     this.element = $("<div class=‘Prompt_floatBoxBg‘ id=‘fb"+ops.name+"‘></div><div class=‘Prompt_floatBox‘ id=‘"+ops.name+"‘><div class=‘content‘></div></div>");
33                     $("body").prepend(this.element);
34                     this.blank = $("#fb"+ops.name);                        //遮罩层对象
35                     this.content = $("#"+ops.name+" .content");                //弹出层内容对象
36                     this.dialog = $("#"+ops.name+"");                        //弹出层对象
37                     if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {//判断IE6
38                         this.blank.css({height:$(document).height(),width:$(document).width()});
39                     }
40                 },
41                 show:function(op){
42                     this.dialog.show();
43                     var ops = $.extend({},this.defaults,op);
44                     this.content.css({width:ops.width});
45                     this.content.html(ops.content);
46                     var Ds = {
47                                width:this.content.outerWidth(true),
48                                height:this.content.outerHeight(true)
49                                };
50                     if(ops.bg){
51                         this.blank.show();
52                         this.blank.animate({opacity:"0.5"},"normal");
53                     }else{
54                         this.blank.hide();
55                         this.blank.css({opacity:"0"});
56                     }
57                     this.dialog.css({
58                                     width:Ds.width,
59                                     height:Ds.height,
60                                     left:(($(document).width())/2-(parseInt(Ds.width)/2)-5)+"px",
61                                     top:(($(window).height()-parseInt(Ds.height))/2+$(document).scrollTop())+"px"
62                                     });
63                     if ($.isNumeric(ops.time)&&ops.time>0){//自动关闭
64                         this.timer.clear();
65                         this.timer.stc = setTimeout(function (){
66                             var DB = $.PromptBox;
67                             DB.close();
68                         },ops.time);
69                     }
70                 },
71                 close:function(){
72                     var DB = $.PromptBox;
73                         DB.blank.animate({opacity:"0.0"},
74                                          "normal",
75                                          function(){
76                                             DB.blank.hide();
77                                             DB.dialog.hide();
78                                           });
79                         DB.timer.clear();
80                 }
81             },
82             Prompt:function(con,t,ops){
83                 if(!$.PromptBox.created){$.PromptBox.create(ops);}
84                 if($.isPlainObject(con)){
85                     if(con.close){
86                         $.PromptBox.close();
87                     }else{
88                         $.PromptBox.config(con);
89                     }
90                     return true;
91                 }
92                 ops = $.extend({},$.PromptBox.defaults,ops,{time:t});
93                 ops.content = con||ops.content;
94                 $.PromptBox.show(ops);
95             }
96         })
97 })(jQuery);

Prompt插件

时间: 2024-11-29 11:49:41

jquery.prompt.js 弹窗的使用的相关文章

一个简单的页面弹窗插件 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

cefsharp重写默认js弹窗(alert/confirm/prompt)

1.设置js弹窗控制器 webView.JsDialogHandler = this;  //js弹窗控制 2.实现接口方法 public bool OnJSAlert(IWebBrowser browser, string url, string message) { MessageBox.Show(message); return true; //阻止js弹 } public unsafe bool OnJSConfirm(IWebBrowser browser, string url, s

JS弹窗加入购物车特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

JQuery之编写弹窗

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0;} #login { z-index:9999; height: 200px; width: 300px; background: #ccc; p

图片上传(方法一:jquery.upload.js)

一.在JSP页面引入jquery.upload.js 文件: <script type="text/javascript" src="${ctx}/script/jquery.upload.js"></script> 二.JSP页面代码: <!-- 弹窗 开始 --> <div class="dialog_teachermanage" id="addDialog" style=&quo

jQuery的dialog弹窗实现

jQuery实现dialog弹窗: html代码如下: <input type="button" onclick="performances();" value="分配" style="background:#18a689 none repeat scroll 0 0;border:1px solid #18a689;color:#FFF;text-shadow:0px -1px 1px #1c6a9e;height:30px;w

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

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

c#+jquery.autocomplete.js

html代码: $(document).ready(function () { $.ajax({ type: "POST", contentType: "json", url: "a.ashx?action=findlist", data: "{}", dataType: "html", success: function (data) { var dataset = eval('(' + data + '

js效果笔记:怎样实现图片的懒加载以及jquery.lazyload.js的使用

在项目中有时候会用到图片的延迟加载,那么延迟加载的好处是啥呢? 我觉得主要包括两点吧,第一是在包含很多大图片长页面中延迟加载图片可以加快页面加载速度:第二是帮助降低服务器负担. 下面介绍一下常用的延迟加载插件jquery.lazyload.js以及怎样实现一个延迟加载的插件. 一:jquery.lazyload.js插件 lazyload是jQuery写的延迟加载插件,在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 实现原理 首