自编jQuery插件实现模拟alert和confirm
投稿：hebedich
字体：[ ] 类型：转载 时间：
现在绝大多数网站都不用自带的alert和confirm了，因为界面太生硬了。因此这个插件就这样产生了...
啥也不说，先上图，有图有真相 :)
现在绝大多数网站都不用自带的alert和confirm了，因为界面太生硬了。因此这个插件就这样产生了...
来看插件的实现代码吧：
(function () {
$.MsgBox = {
Alert: function (title, msg) {
GenerateHtml("alert", title, msg);
btnOk(); //alert只是弹出消息，因此没必要用到回调函数callback
Confirm: function (title, msg, callback) {
GenerateHtml("confirm", title, msg);
btnOk(callback);
//生成Html
var GenerateHtml = function (type, title, msg) {
var _html = "";
_html += '&div id="mb_box"&&/div&&div id="mb_con"&&span id="mb_tit"&' + title + '&/span&';
_html += '&a id="mb_ico"&x&/a&&div id="mb_msg"&' + msg + '&/div&&div id="mb_btnbox"&';
if (type == "alert") {
_html += '&input id="mb_btn_ok" type="button" value="确定" /&';
if (type == "confirm") {
_html += '&input id="mb_btn_ok" type="button" value="确定" /&';
_html += '&input id="mb_btn_no" type="button" value="取消" /&';
_html += '&/div&&/div&';
//必须先将_html添加到body，再设置Css样式
$("body").append(_html); GenerateCss();
var GenerateCss = function () {
$("#mb_box").css({ width: '100%', height: '100%', zIndex: '99999', position: 'fixed',
filter: 'Alpha(opacity=60)', backgroundColor: 'black', top: '0', left: '0', opacity: '0.6'
$("#mb_con").css({ zIndex: '999999', width: '400px', position: 'fixed',
backgroundColor: 'White', borderRadius: '15px'
$("#mb_tit").css({ display: 'block', fontSize: '14px', color: '#444', padding: '10px 15px',
backgroundColor: '#DDD', borderRadius: '15px 15px 0 0',
borderBottom: '3px solid #009BFE', fontWeight: 'bold'
$("#mb_msg").css({ padding: '20px', lineHeight: '20px',
borderBottom: '1px dashed #DDD', fontSize: '13px'
$("#mb_ico").css({ display: 'block', position: 'absolute', right: '10px', top: '9px',
border: '1px solid Gray', width: '18px', height: '18px', textAlign: 'center',
lineHeight: '16px', cursor: 'pointer', borderRadius: '12px', fontFamily: '微软雅黑'
$("#mb_btnbox").css({ margin: '15px 0 10px 0', textAlign: 'center' });
$("#mb_btn_ok,#mb_btn_no").css({ width: '85px', height: '30px', color: 'white', border: 'none' });
$("#mb_btn_ok").css({ backgroundColor: '#168bbb' });
$("#mb_btn_no").css({ backgroundColor: 'gray', marginLeft: '20px' });
//右上角关闭按钮hover样式
$("#mb_ico").hover(function () {
$(this).css({ backgroundColor: 'Red', color: 'White' });
}, function () {
$(this).css({ backgroundColor: '#DDD', color: 'black' });
var _widht = document.documentElement.clientW //屏幕宽
var _height = document.documentElement.clientH //屏幕高
var boxWidth = $("#mb_con").width();
var boxHeight = $("#mb_con").height();
//让提示框居中
$("#mb_con").css({ top: (_height - boxHeight) / 2 + "px", left: (_widht - boxWidth) / 2 + "px" });
//确定按钮事件
var btnOk = function (callback) {
$("#mb_btn_ok").click(function () {
$("#mb_box,#mb_con").remove();
if (typeof (callback) == 'function') {
callback();
//取消按钮事件
var btnNo = function () {
$("#mb_btn_no,#mb_ico").click(function () {
$("#mb_box,#mb_con").remove();
Html代码结构如下，js里面拼接的不直观，给出如下：
&div id="mb_box"&&/div&
&div id="mb_con"&
&span id="mb_tit"&title&/span&&a id="mb_ico"&x&/a&
&div id="mb_msg"&msg&/div&
&div id="mb_btnbox"&
&input id="mb_btn_ok" type="button" value="确定" /&
&input id="mb_btn_no" type="button" value="取消" /&
　　mb_box为半透明遮罩层，将整个页面遮住，禁止操作；mb_con为提示框。之所以没把mb_con放在mb_box里面，是因为如果放里面的话，对mb_box设置的透明度会影响到mb_con，使mb_con也会变成透明的。之前也试过background-color:rgba()，可惜ie8及以下版本不支持。所以还是把mb_con拿到外面来了，通过设置z-index使其mb_box的上面。
　　为了使插件使用方便，特意的没有用到图片，全是通过css来控制界面效果，使用时，引用一个js文件就可以了。css样式在js中写死了，这点可能不太灵活，但使用却很方便如果你对界面样式不满意或者与你网站的色彩风格不一致，那只能自行修改了。
　　由于弹出层（div）无法做到像原始的alert和confirm那样做到页面阻塞效果，因此只能通过 回调函数 来进行模拟。也因为这个原因，后台数据操作只能通过回调函数配合ajax来完成的。
Demo如下：
&html xmlns="http://www.w3.org/1999/xhtml"&
&title&模拟alert和confirm提示框&/title&
&input id="add" type="button" value="添加" /&
&input id="delete" type="button" value="删除" /&
&input id="update" type="button" value="修改" /&
&script src="../js/jquery-1.4.1.min.js" type="text/javascript"&&/script&
&script src="../js/jquery.similar.msgbox.js" type="text/javascript"&&/script&
&script type="text/javascript"&
$("#add").bind("click", function () {
$.MsgBox.Alert("消息", "哈哈，添加成功！");
//回调函数可以直接写方法function(){}
$("#delete").bind("click", function () {
$.MsgBox.Confirm("温馨提示", "执行删除后将无法恢复，确定继续吗？温馨提示", function () { alert("你居然真的删除了..."); });
function test() {
alert("你点击了确定,进行了修改");
//也可以传方法名 test
$("#update").bind("click", function () {
$.MsgBox.Confirm("温馨提示", "确定要进行修改吗？", test);
//当然你也可以不给回调函数,点击确定后什么也不做，只是关闭弹出层
　　　　 //$("#update").bind("click", function () { $.MsgBox.Confirm("温馨提示", "确定要进行修改吗？"); });
代码量并不多，如有什么疑问可以留言 :)
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具　　最近开发过程中需要用到一个能够复制文本内容的提示框，其实alert()方法的内容是可以复制的：把鼠标点击在alert框上并按下Ctrl+C就复制成功了，只是效果十分不明显，所以找了一款不错的插件，其能够美观地表达info,success,error,confirm,warning,input(prompt),custom(自定义)等提示框。详细地址可以参考，在此记录一下方便自己以后使用。
　　首先把压缩包下载下来，为了方便表示我把所有的文件都放在一个文件夹并命名为xcConfirm如图所示：
其中icons.png为图标图片，在使用不同类型的方法时会调用不同的icon，而且在xcConfirm.css里会引用到该文件，所以要选对其正确的项目路径的icon图如下：
xcComfirm.css文件主要包含了提示框所用到的的外观样式,除了引用图片的路径为基本上不需要改动，可以直接引用:
/*垂直居中*/
.verticalAlign
vertical-align:middle;
display:inline-block;
height:<span style="color: #%;
margin-left:-1px;
.xcConfirm .xc_layer
position: fixed;
width: 100%;
height: 100%;
background-color: #666666;
opacity: 0.5;
z-index: ;
.xcConfirm .popBox
position: fixed;
left: 50%;
background-color:#ffffff;
z-index: ;
width: 570px;
height: 300px;
margin-left: -285px;
margin-top: -150px;
border-radius: 5px;
font-weight: bold;
color: #535e66;
.xcConfirm .popBox .ttBox
height: 30px;
line-height: 30px;
padding: 14px 30px;
border-bottom: solid 1px #eef0f1;
.xcConfirm .popBox .ttBox .tt
font-size: 18px;
display: block;
float: left;
height: 30px;
position: relative;
.xcConfirm .popBox .ttBox .clsBtn
display: block;
cursor: pointer;
width: 12px;
height: 12px;
position: absolute;
top: 22px;
right: 30px;
/*根据图片位置改变引用路径*/
background: url(./icons.png) -48px -96px no-repeat;
.xcConfirm .popBox .txtBox
margin: 40px 100px;
height: 100px;
overflow: hidden;
.xcConfirm .popBox .txtBox .bigIcon
float: left;
margin-right: 20px;
width: 48px;
height: 48px;
/*根据图片位置改变引用路径*/
background-image: url(./icons.png);
background-repeat: no-repeat;
background-position: 48px 0;
.xcConfirm .popBox .txtBox p
height: 84px;
margin-top: 16px;
line-height: 26px;
overflow-x: hidden;
overflow-y: auto;
.xcConfirm .popBox .txtBox p input
width: 364px;
height: 30px;
border: solid 1px #eef0f1;
font-size: 18px;
margin-top: 6px;
.xcConfirm .popBox .btnArea
border-top: solid 1px #eef0f1;
.xcConfirm .popBox .btnGroup
float: right;
.xcConfirm .popBox .btnGroup .sgBtn
margin-top: 14px;
margin-right: 10px;
.xcConfirm .popBox .sgBtn
display: block;
cursor: pointer;
float: left;
width: 95px;
height: 35px;
line-height: 35px;
text-align: center;
color: #FFFFFF;
border-radius: 5px;
.xcConfirm .popBox .sgBtn.ok
background-color: #0095d9;
color: #FFFFFF;
.xcConfirm .popBox .sgBtn.cancel
background-color: #546a79;
color: #FFFFFF;
xcConfirm.js则包含了封装好的方法，引用即可：
(function($){
window.wxc = window.wxc || {};
* 使用说明:
* popHtml:html字符串
* type:window.wxc.xcConfirm.typeEnum集合中的元素
* options:扩展对象
* 1. window.wxc.xcConfirm("我是弹窗&span&lalala&/span&");
* 2. window.wxc.xcConfirm("成功","success");
* 3. window.wxc.xcConfirm("请输入","input",{onOk:function(){}})
* 4. window.wxc.xcConfirm("自定义",{title:"自定义"})
window.wxc.xcConfirm = function(popHtml, type, options) {
var btnType = window.wxc.xcConfirm.btnE
var eventType = window.wxc.xcConfirm.eventE
var popType = {
title: "信息",
icon: "0 0",//蓝色i
btn: btnType.ok
success: {
title: "成功",
icon: "0 -48px",//绿色对勾
btn: btnType.ok
title: "错误",
icon: "-48px -48px",//红色叉
btn: btnType.ok
confirm: {
title: "提示",
icon: "-48px 0",//黄色问号
btn: btnType.okcancel
warning: {
title: "警告",
icon: "0 -96px",//黄色叹号
btn: btnType.okcancel
title: "输入",
btn: btnType.ok
title: "",
btn: btnType.ok
var itype = type ? type instanceof Object ? type : popType[type] || {} : {};//格式化输入的参数:弹窗类型
var config = $.extend(true, {
title: "", //自定义的标题
icon: "", //图标
btn: btnType.ok, //按钮,默认单按钮
onOk: $.noop,//点击确定的按钮回调
onCancel: $.noop,//点击取消的按钮回调
onClose: $.noop//弹窗关闭的回调,返回触发事件
}, itype, options);
var $txt = $("&p&").html(popHtml);//弹窗文本dom
var $tt = $("&span&").addClass("tt").text(config.title);//标题
var icon = config.
var $icon = icon ? $("&div&").addClass("bigIcon").css("backgroundPosition",icon) : "";
var btn = config.//按钮组生成参数
var popId = creatPopId();//弹窗索引
var $box = $("&div&").addClass("xcConfirm");//弹窗插件容器
var $layer = $("&div&").addClass("xc_layer");//遮罩层
var $popBox = $("&div&").addClass("popBox");//弹窗盒子
var $ttBox = $("&div&").addClass("ttBox");//弹窗顶部区域
var $txtBox = $("&div&").addClass("txtBox");//弹窗内容主体区
var $btnArea = $("&div&").addClass("btnArea");//按钮区域
var $ok = $("&a&").addClass("sgBtn").addClass("ok").text("确定");//确定按钮
var $cancel = $("&a&").addClass("sgBtn").addClass("cancel").text("取消");//取消按钮
var $input = $("&input&").addClass("inputBox");//输入框
var $clsBtn = $("&a&").addClass("clsBtn");//关闭按钮
//建立按钮映射关系
var btns = {
cancel: $cancel
function init(){
//处理特殊类型input
if(popType["input"] === itype){
$txt.append($input);
creatDom();
function creatDom(){
$popBox.append(
$ttBox.append(
$txtBox.append($icon).append($txt)
$btnArea.append(creatBtnGroup(btn))
$box.attr("id", popId).append($layer).append($popBox);
$("body").append($box);
function bind(){
//点击确认按钮
$ok.click(doOk);
//回车键触发确认按钮事件
$(window).bind("keydown", function(e){
if(e.keyCode == 13) {
if($("#" + popId).length == 1){
//点击取消按钮
$cancel.click(doCancel);
//点击关闭按钮
$clsBtn.click(doClose);
//确认按钮事件
function doOk(){
var $o = $(this);
var v = $.trim($input.val());
if ($input.is(":visible"))
config.onOk(v);
config.onOk();
$("#" + popId).remove();
config.onClose(eventType.ok);
//取消按钮事件
function doCancel(){
var $o = $(this);
config.onCancel();
$("#" + popId).remove();
config.onClose(eventType.cancel);
//关闭按钮事件
function doClose(){
$("#" + popId).remove();
config.onClose(eventType.close);
$(window).unbind("keydown");
//生成按钮组
function creatBtnGroup(tp){
var $bgp = $("&div&").addClass("btnGroup");
$.each(btns, function(i, n){
if( btnType[i] == (tp & btnType[i]) ){
$bgp.append(n);
//重生popId,防止id重复
function creatPopId(){
var i = "pop_" + (new Date()).getTime()+parseInt(Math.random()*100000);//弹窗索引
if($("#" + i).length & 0){
return creatPopId();
//按钮类型
window.wxc.xcConfirm.btnEnum = {
ok: parseInt("0001",2), //确定按钮
cancel: parseInt("0010",2), //取消按钮
okcancel: parseInt("0011",2) //确定&&取消
//触发事件类型
window.wxc.xcConfirm.eventEnum = {
cancel: 2,
//弹窗类型
window.wxc.xcConfirm.typeEnum = {
info: "info",
success: "success",
error:"error",
confirm: "confirm",
warning: "warning",
input: "input",
custom: "custom"
})(jQuery);
最后在我们的index.html测试页面引入上述的css文件，js文件以及jquery文件即可：
&!DOCTYPE html&
&meta charset="utf-8" /&
&title&Demo&/title&
&!--引入xcConfirm.css--&
&link rel="stylesheet" type="text/css" href="./xcConfirm.css"/&
&!--引入JQuery--&
&script src="./jquery-1.9.1.js" type="text/javascript" charset="utf-8"&&/script&
&!--引入xcConfirm.js--&
&script src="./xcConfirm.js" type="text/javascript" charset="utf-8"&&/script&
&!--页面8个按钮的样式--&
&style type="text/css"&
.sgBtn{width: 135px; height: 35px; line-height: 35px; margin-left: 10px; margin-top: 10px; text-align: center; background-color: #0095D9; color: #FFFFFF; float: left; border-radius: 5px;}
&!--8个按钮绑定点击事件--&
&script type="text/javascript"&
$(function()
$("#btn1").click(function()
"我的提示信息的文字";
window.wxc.xcConfirm(txt, window.wxc.);
$("#btn2").click(function()
"我是提示确认的文字";
window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.confirm);
$("#btn3").click(function()
"我是提示警告的文字";
window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.warning);
$("#btn4").click(function()
"我是提示错误的文字";
window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.error);
$("#btn5").click(function()
"我是提示成功的文字";
window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.success);
$("#btn6").click(function()
"我是提示输入的文字";
window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.input,
//点击确认的事件
onOk:function(v)
console.log(v);
$("#btn7").click(function()
"自定义呀";
var option =
title: "自定义",
btn: parseInt("0011",2),
onOk: function()
console.log("确认啦");
window.wxc.xcConfirm(txt, "custom", option);
$("#btn8").click(function()
"默认文字";
window.wxc.xcConfirm(txt);
&!--8个按钮--&
&div class="" style="height: 768"&
&div class="sgBtn" id="btn1"&弹窗1(信息)&/div&
&div class="sgBtn" id="btn2"&弹窗2(提示)&/div&
&div class="sgBtn" id="btn3"&弹窗3(警告)&/div&
&div class="sgBtn" id="btn4"&弹窗4(错误)&/div&
&div class="sgBtn" id="btn5"&弹窗5(成功)&/div&
&div class="sgBtn" id="btn6"&弹窗6(输入框)&/div&
&div class="sgBtn" id="btn7"&弹窗7(自定义)&/div&
&div class="sgBtn" id="btn8"&弹窗8(默认)&/div&
最后打开index.html长成这样：
随便点击一个按钮：
OK，其实最核心的就是方法就是使用window.wxc.xcConfirm(txt, window.wxc.)来代替alert()或者confirm()或者prompt(),其次重写了onOk():function(v){}方法，而且可以在css里改变整个框的位置以及样式，终于不用alert()，confirm(),prompt(),Nice!
阅读(...) 评论()本帖子已过去太久远了，不再提供回复功能。当前位置： >
> tinybox JavaScript弹出层插件类
tinybox JavaScript弹出层插件类
脚本大小：46KB
软件语言：简体中文
脚本类型：
脚本授权：免费软件
更新时间：
脚本类别：ajax/javascript
相关链接： 未知官方&&无演示
应用平台：
网友评分：
内容介绍热点排行下载地址相关内容
本计算器由HTML+javascript共同编写完成，除了最基本的加、减、乘、除功能外，还支持常用的储存、取存、累存、积存、清存、取余、取整功能，支持十六进制、十进制、八进制一款很不错的基于JavaScript的日期控件――My97DatePicker，这是官方早两天更新修正的最新版本 v4.5 ，去掉了原有包中一些无用文件。本JS日历使用者非常多，因为其功能比较swfobject.js Flash性能增强插件，一般在大型Flash应用或特效制作方面都会用到这个小插件，它会让flash 性能发挥更稳定，甚至是功能更多，本插件同样是出自Adobe官方，脚本一款原生js图片滚动插件，wap网页手机触屏滑动图片滚动切换效果jquery.easing.js 1.3 是一个配合jquery实现完美动画效果的扩展插件&
做站的朋友都离不开广告代码，好的广告代码可以帮助商家获得利益，同时也能辅助美化你的页面，本广告代码是花了两个钟头从新浪网扒下来的，带重播按钮的正方形多媒lhgdialog是一个多功能，高效率的弹出窗口组件,有详细的使用帮助。
修正了随滚动条滚动时拖动后滚动不正确的BUG
修正了在谷歌浏览器下滚动出错的BU我在很久以前曾发布过一个美化的单选下拉框组件，一度很火爆。相信现在读我帖子的人里面仍然有在用这个组件的。这次给大家介绍一款非常好用的树形下拉框组件：QUI树形下拉JS实现的上下滑动选择和左右滑动选择效果,可以垂直滚动选择，也可以水平滚动选择，选择后在右侧框内出现详细信息JS图片左右切换效果,代码里面有注释，使用比较方便，测试兼容firefox 3.5
费了九牛二虎之力才把这个效果整理好。重新定义了数组。主要是为了编辑们修改方便。
tinybox JavaScript弹出层插件类
CopyRight &
JB51.Net , All Rights Reserved博客访问： 7807864
博文数量： 2159
博客积分： 10377
博客等级： 上将
技术积分： 21595
注册时间：
IT168企业级官微
微信号：IT168qiye
系统架构师大会
微信号：SACC2013
给主人留下些什么吧！~~
hkebao: 他爹怎么不让我加群呀。。。.....现在可以加了。
请登录后留言。