- 浏览: 147365 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
陈颜宇:
prompt在哪啊,只看到了confirm 和 alert
给Jquery添加alert,prompt方法,类似系统的Alert,Prompt,可以响应键盘,支持拖动 -
陈小妞:
alert(el.getAttribute("cla ...
Javascript兼容性之——getAttribute(),setAttribute()(获取设置属性) -
I白I:
厉害。。。
HTML5实现全屏API【进入和退出全屏】 -
joyven:
...
Javascript兼容性之——getAttribute(),setAttribute()(获取设置属性) -
小林夕:
看看一个用canvas到极致的案例 ProcessOn
HTML5 Canvas实战——HTML5 Canvas时间效果
给Jquery添加alert,prompt方法,类似系统的Alert,Prompt,可以响应键盘,支持拖动
- 博客分类:
- CSS
- jQuery插件系列
- Javascript
我们在调用系统的Alert,prompt的弹出提示时,不同的系统会有不同的提示框,视觉效果不统一,而且不好看,功能单一,现在我们通过Jquery模拟Alert,prompt,现实统一视觉效果,而且内容丰富的弹出提示。
Jquery可以扩展自己的功能,如果对Jquery开发插件不熟悉的人可以到官方网去看看文档,比较简单易懂。
/* * 本插件基于JQUERY * Jquery版本: 1.7.2 * Date:2012-06-28 * Author:Kingwell * E-mail:jinhua.leng##gmail.com * * ---------- 接口说明: ---------- * * --本插件采用kw命名空间,给Jquery添加静态方法,故调用方法为 $.kw.方法名 参数如下: * --调用方法: * --alert $.kw.alert(content,title,callBack) * --prompt $.kw.prompt(title,content,callBack) * * * -- title 标题名称 如果缺省,则为默认标题,如:"系统提示" * -- content 内容显示的内容 * --callback 回调函数,单击确定后要执行的内容 * * * --功能:类似系统功能,支持拖动,响应键盘事件,ESC退出,Enter确定,以及回调函数功能。 * * */ $(function () { $.kw = { title : "System information", //默认标题 可修改 speed : 400, //默认速度 可修改 buttonName : "OK", //确定按钮默认名称 可修改 cancel : "Cancel", //取消按钮默认名称 可修改 content : "Content", //移除遮盖层 del : function () { $("#alert-layer").remove(); }, //响应ESC键盘退出 esc : function () { $(document).keyup(function (event) { if (event.which == 27) { $.kw.del(); } }); }, //内容显示功能 alert : function (sContent, sTitle, callBack) { var title = sTitle || this.title; var layer = "<div id='alert-layer'><div id='alert-container'><div class='alert-top'></div><div class='alert-box'><div id='alert-title'>" + title + "<div id='alert-close' title='Close'></div></div><div id='alert-content'>" + sContent + "</div><div class='alert-button'><button id='alert-button'>" + this.buttonName + "</button></div></div><div class='alert-bottom'></div></div></div>"; $(layer).fadeIn(this.speed).appendTo("body"); this.setting(); this.move(); $("#alert-button").focus(); $("#alert-close").bind("click", this.del); //移除层 $("#alert-button").bind("click", function () { if (callBack) { callBack(); } $.kw.del(); }); //移除层 this.esc(); }, //提示 confirm : function (sContent, callBack, sTitle) { var title = sTitle || this.title; var content = sContent || this.content; var layer = "<div id='alert-layer'><div id='alert-container'><div class='alert-top'></div><div class='alert-box'><div id='alert-title'>" + title + "<div id='alert-close' title='Close'></div></div><div id='alert-content'>" + sContent + "</div><div class='alert-button'><button id='alert-button'>" + this.buttonName + "</button><button id='alert-cancel'>" + this.cancel + "</button></div></div><div class='alert-bottom'></div></div></div>"; $(layer).fadeIn(this.speed).appendTo("body"); this.setting(); $("#alert-button").focus(); //获得焦点 this.move(); //拖动 $("#alert-close").bind("click", this.del); //移除层 $("#alert-cancel").bind("click", this.del); //移除层 $("#alert-button").bind("click", function () { $.kw.del(); if (callBack) { callBack(); }; }); //移除层 this.esc(); }, //框拖动功能 move : function () { $("#alert-title").mousedown(function (event) { var l = parseInt($("#alert-container").css("left")), t = parseInt($("#alert-container").css("top")); x = event.pageX - l; y = event.pageY - t; $("body").bind("mousemove", function (event) { $("#alert-container").css({ "left" : (event.pageX - x) }); $("#alert-container").css({ "top" : (event.pageY - y) }); //$("#alert-container").fadeTo(0,0.9) }); }); $("body").mouseup(function () { $("body").unbind("mousemove"); //$("#alert-container").fadeTo(0,1) }); }, //设置背景层与内位置 setting : function () { var bcw = document.documentElement.clientWidth, bch = document.documentElement.clientHeight, bsh = document.documentElement.scrollHeight, aw = $("#alert-container").width() / 2, ah = $("#alert-container").height() / 2; $("#alert-layer").css("height", bsh); $("#alert-container").css({ "top" : bch / 2 - ah, "left" : bcw / 2 - aw }); } //$.kw End }; });
#alert-layer button:focus{border:1px solid #AAA!important; background:#789!important; color:white; outline:none} #alert-layer{position:absolute;left:0;top:0;width:100%;height:100%;color:#333;line-height:1;z-index:10000; background:rgba(0,0,0,0.1)} #alert-layer #alert-container{border-radius:3px; padding:10px; width:390px; position:fixed; _position:absolute;} #alert-layer .alert-top{background:url(images/conner2.png) no-repeat left top; height:10px;} #alert-layer .alert-bottom{background:url(images/conner2.png) no-repeat left bottom; height:10px;} #alert-layer #alert-title{font-size:15px; height:30px;line-height:25px;padding:0 10px;position:relative;font-weight:bold;cursor:move;} #alert-layer #alert-close{background: url(images/close.gif) no-repeat center center; width:25px; height:25px; position:absolute; cursor:pointer; right:2px; top:0px;} #alert-layer .alert-button{ padding:5px 10px; text-align:right} #alert-layer #alert-content{background:#F1F1F1; border-top:1px solid #B9B9B9; border-bottom:1px solid #B9B9B9; padding:10px 15px;} .alert-box{background:url(images/tc_bg.png) repeat-y left top; padding:0 6px} #alert-layer button{padding:5px; border:1px solid #CCC; margin:auto 5px; border-radius:2px; min-width:60px;} #alert-layer h1,#alert-layer h2,#alert-layer h3,#alert-layer h4{margin:10px auto; font-size:16px}
调用方法:
$.kw.alert("提示内容") $.kw.alert("提示内容","系统提示")//修改弹出框提示标题 $.kw.comport("提示内容");
发表评论
-
Backbone1.0.0数据验证的变化
2014-07-10 09:48 6670.5.3版本对Model数据验证时,绑定Error就可以了 ... -
使用Sass预定义一些常用的样式,非常方便
2014-06-04 11:04 1247各种新技术的出现,推动着Web前端技术飞速发展,在提升用户体 ... -
使用Sass预定义一些常用的样式,非常方便
2014-06-04 11:03 1222CSS预处理技术现在已经非常成熟,比较流行的有Less,Sa ... -
去掉IE10+input 文本后面“删除图标”与密码文本框后面“查看密码图标”
2014-05-04 15:38 1239在最新的IE浏览器(IE10+)上使用表单时,文本框内 ... -
CSS实现箭头效果
2013-09-23 15:26 1748有时候网页中使用箭头以增强效果,一般的做法是使用图片,今天我 ... -
IE6透明PNG解决方案
2013-09-17 19:31 1888IE6不支持PNG-24图片一直困扰很多人,但是可以通过I ... -
清除HTML之间的空白节点
2013-09-01 16:57 5593HTML之间的空白节点,会影响HTML排版,清除空白节点除了 ... -
attachEvent 中this指向
2013-09-01 16:45 1393IE中使用的事件绑定函数与Web标准的不同,而且this指向 ... -
十六制作颜色转RGB格式
2013-09-01 16:15 1221十六制作颜色转RGB格式: function toR ... -
kingwell Calendar V1.0 日历时间组件
2013-08-07 09:10 1238项目中经常要使用日历时间插件,网上也有很多很优秀的插件,但是 ... -
HTML5获取地理位置信息并在Google Maps上显示
2013-08-07 09:08 1003使用HTML5 navigator geol ... -
HTML5 Canvas实战——HTML5 Canvas时间效果
2013-08-07 09:04 1413HTML5 Canvas实战 function cl ... -
JS window.name跨域封装
2013-08-07 09:02 1842function CrossDomainName(targe ... -
前端开发工程师如何在2013年里提升自己【转】
2013-07-10 10:33 774大部分人非常在意个人在技术上的提升。但是保持对新技术的了解是 ... -
动态加载javascript增强版
2013-04-21 10:25 1526我们经常使用动态加 ... -
jQuery性能优化的28个建议 (转)
2013-04-20 12:08 799我一直在寻找有关jQuery ... -
封装JSONP
2013-04-01 13:06 4925我们经常遇到JS 跨域的问题,跨域的解决方案有很多,JSO ... -
HTML5 Web Storage
2013-03-21 11:56 1918体验了一下HTML5 在HTML5中,除了Canvas元素 ... -
计算时间差
2013-03-21 11:15 1466<!DOCTYPE HTML> <html ... -
CSS内联还是外联?
2012-09-24 16:33 1347现在是一个推崇结构,表现,行为想分离的时代,最大的好处就是维护 ...
相关推荐
JQuery alert confirm prompt 修改版
jquery.alerts.js(jQuery Alert, Confirm, Prompt)
通过查阅资料和网络搜索,自己整理了一下,编写了这个基于jQuery的插件,用于模仿替换系统自带的 alert、confirm、prompt等提示窗体。
jQuery做的alert、confirm、prompt弹框 可以自行修改样式
jQueryAlert:jQuery JS的Alert、Comfirm、Prompt的提示对话框效果,效果非常棒,可以用来模拟代替默认的对话框
JQuery插件:alert、confirm、prompt对话框插件
JQuery Alert Confirm
美化js系统函数alert,confirm,prompt,并实现lightbox效果 美化js系统函数alert,confirm,prompt,并实现lightbox效果
JQuery Alert、confirm、prompt提示框插件.zip
内容索引:脚本资源,jQuery,提示框,jQuery插件,Confirm jQuery Alert Dialogs,又一个基于jQuery的提示框插件,主要包括Alert、Confirm、prompt这三种,还有一个高级范例,可以在提示框内嵌入HTML语言,可以自定义...
在Android的webview中定制js的alert,confirm和prompt对话框的方法
前端项目-jquery-prompt21,21世纪最简单的jquery提示插件。
jquery的插件,实现用javascript实现alert,prompt,confirm的效果。
jqueryAlert confirm prompt 将jqueryDialog改成prompt形式
Jquery样式化Alert,Confirm,Prompt窗口.
自己实现的alert、confirm、prompt弹出框,代码简单易懂,效果个人认为还不错,样式仿效的是Ext的弹出框。希望对大家有用,同时也请大家多多指教!有不足的地方能够指出来!大家共同进步!
SQLPrompt_10.1.4.14671 支持SSMS18.5。 SQL Prompt是一款拥有SQL智能提示功能的SQL Server和VS插件。SQL Prompt能根据数据库的对象名称,语法和用户编写的代码片段自动进行检索,智能的为用户提供唯一合适的代码...
asp.net 中Alert、Confirm、Prompt的用法,适合初学者。
没有厌倦了原来那alert那个风格,总是一个感叹号。有时使得UE不好,今天我们介绍使用Jquery Alert插件 ,使用它可以用来替换JScript中的alert,confirm,prompt。