正文

JavaScript实现自定义alert弹框

IP云
IP云V管理员/18 阅读
08/05
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

aaarticlea/png;base64,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kITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkMSEkTx4e3v7SB4eADiBaOkAAJIQOgCAJIQOACAJoQMASELoAACSGNHZK0A6//iP/xh79uyJQ4cOjXZRRtSkSZNi+vTp8f73v3+0iwIcI6EDxoFvrl8fr548OW644Ya8Qh7PsmC1vnC92TV/4JprRrs4wDEQOmAc2PfCC7H0T/4kpkyZEi+99NJoF2dETZ06Na699tq49dZbR7sowDEypgPGgY6OjrwyfuWVV0a7KCMuu8bsWrNrBk4sWjpgnOju7s63k8HJcp0w3ggdMI6ojIGxTPcKAJCE0AHjSLmLZdBtx+2xaNHtsWMo+xa2HbcviinLv3+U/b4fy2scM3vvott3DPyeKcvj+z33p+QDYftv5X16N+DEJHTAOJFVxl1dXT1b++3viZaWlt7tPbdHe1ehcn/rF+Lxx78Qb+157T1xe3tXn/dWbmcv+09x3devjuXfH3ifrq5CGIjumu+d/4VlNY/ffvut8fXrFsfC/PHCuO255+K559bHdeffEk/k90uPsyNXvVfwgBOTMR0wjlRWxrOWbYo9yyIe+PTi2P6pTfHxc3bE1977yWh9bE/sOae4zwOfnh4bL9sUy2ZlLQj5M/Hp6R+Iu2od/Jppsa7PE+fHysey4+ZnLoaOrCXigU/H9A9UHeG8aXFj6e6Sb+6Jvz7na/GJGx/PDhrTsoOevzIe2/TxOGdHW2wtPMyPE6Xjnt8as3seAycyoQPGtQdiY/xZoZLPAsbb4ruFoPD426bHispd7pqeh4w8DLw7egPAoMctBJjFnyyeoRBcyhnjrukrYsmSJdnBYk9+sKp3fW1xfDV7z1dXxO8Wzrep/y7AOKZ7BcaRfuMmHtgYd931gXyV0tvmbY6Nf/a7eSB49tlnY/PK8wt3n+25n7cqdC+M2zYuK7YsDLrNjmUbN8ay2d2x8LbsGN+MJYWwsrlwrNtuuy2evW1hYZ/2QjBZHF9r733f7GUb47aF2Xs2x7zbpuflyrbFX2sv7VN1He3b4+c1rgs4MWnpgHHiyJEjsX///opnnoqvf/mueOtN/yfunfXf4qpdB2P/wY6IQgg5s6f348yerpRr/25//OvfXBXvuvn/Dfmc+bH/w9mFewejo/NQ/NOf/mHEn9wb+VM/WBUr5n482qfvjz7Fyk2Pa7/5d/GzOQ/Eu9tXxh/ED+JPz7wg7i69esGZKypPEgcLB6g8xGmnnTbkMgJjh9AB40g2yLLsqa//WWT5YcHiruIYia7ibXzgzmi7+fcLr18dd86+Jwp3i/e7u2LmkvXRtqT/cX94U2s88O62fN/+59wZX7/6j+PuJwuH/o9t8bEHr4w5tzxZevXumHN31RtK5y+PA8nLFZfEX7S1xV/88KZofeDdpdfzi4irP1MaQFqPHxAwqoQOGEd6ux6eioc2zosbb4zYWKrcy5X8gjlnF7spys90R5/7uR/dFNfs/Fisv+7s0oGrXu/xVKy75rMRX74zrvnszvjjS7rjDZesj22zb4p59y+KbTdfUrXf+sgO+cMVrfGx9cVXvtn6zcgGlN657eZC9CgWpuc6spt5s+MNBpLCuCB0wLh0dly3/uZ4at01hdDR66md2+LJWxbFvFvKz8yLUt0f19zZu9+P7l8f8xbd3OeI6z/Wu29uwY1x//rrCufJnv1R3NRzknVxTSFRLLjxY73nXffZuGXeJ2NbKcNccvO2QiApvGfe/bEoDxvAyUDogHGivE5Hpa7uiCf/shAyCvcXfGFhPLTpybhm7b/Fnxdq+afuujb++6y7e+/na2BE9iD+tpAjnowfxJ+/oxgHsqfL7+t7gnK3R/b/0jodMz8Sd//bR/JjzptX6mZZ8IX433e/o6p8pXd2/SBuunZXfPTuJXF24akFc2b27rdze6EcZ/e7LoNJ4cRU99krDQ0N9T4kMETVC3BldfOCz/9zbN26Nf7hkp2x6cmr413v6H2tu7v6/q5Y95//MuLza+Lz25bGG69dF7uq9h1scbDuqnPnrv58fD7+Mv7wjdfGul3V71kfS994R5zzVx+OmYXndu3clp2od5/iifudDxgdx1vHa+mAcaJWS8dZH/pGfCOKYeT//t1fxdw7tsTFpdaJvNLfsS4+uOxL8ZP4vfjcxq744RffG5veszH+/kNviPjQlnjnNz4c753/V8WD3TM/7qk+6VV3xB3xifjEvcX7/+WHX4z5+YOI3/vcxtiy5Q2lHT9U+O8X8Y0Pz48P/mHh+B8pPP+LHbHt9z4XG//+IxHf+GDM/9JPSvu+N8qnLJ045nffEVu++M4+1wqceBo2bNhwXL+95T90nZ2d+ZS9w4cPx6FDh+K7nW+JryxsqVc5gUF89atfjZUrV8auXbtGuyhJzJo1K1asWBGf+tSnRrsocFK44cG98b6mn8akSZNi4sSJMWHChGhqaorGxsZjav2oe0tHdnJdLDA6dD0AI6Ue9XtdQ0e5MNntKc2NeQLyRxDSOJlW6zxZrhPGgqwuP7W5KQqRI398PMGjLqGjnH4qtymTJkR3QzZOVeiAkdbc3Bx79+6NGTNmxNNPPz3axRlRM2fOzK81u2Zg5HVHY0w5tRA6Xulf1x+rurV0VLZyZNtZkxtiX0djnO7bXWDETZkyJb797W/HVVddFXPnzh3t4oyoffv25deaXTMw8vZ2NMTMyY3RcKihT10/HHUZSJrJBpJmXSkdHR3FwaTT5saR06bHorOkDkjh7rvvzr97JfsdHM+yFo7TTz89rr322tEuCpwU/vkXnTHppT0x6fn2fBBp9juYdblkA0kzozKQtHzSckGa92yPx/edFpe+YUpM6BrffwRhLFAJA/XW2TgxfvbMC/G2V9qiqRQ2MsNt6TjuZojKppby1JnstrHw9AWnvxj/418OFB43He9pAICEsrr7zp/uj/Mm74umxsY+dfxwu1nq1vdR3dKRz+Hdsz3OnHAo7ttxKBoadbMAwIkgCxz37Tgcr2s+HBOe29FnXY7MqLV09C1kY58tK+S0Pf8Shw4eiK/95GB0NhptDgBj2ZGG5vjbJw9Ex0svRkuhDs/CRjlwlLfhqtuU2WxAaXnmSuUAk8xr926JqdNb40uPdsX5M06Nt79+UpzRnH1PQ6f59gAwivK6u7Ep9nU0xI9/dSie2P1CXHjGi9H8XHs0TZiQNyA0VnSvHM8MlrqvSForAeWFfb49LonG6Dh4Tnxv26vjlwe649kDHXG40zoeADBaJjY1xpmTm2PGaRGvbXgxLunaFQ3Pd8aE5uaeFo7Klo7jUdfZK+VWi8pCZc9nU2nLt43PbY+zCrczstUTGwtbw8mziiIAjCU9C3293JAv/tUbMJr7dalU1+3DUfdl0KuDR+XKZdlr2UUUv/a6N2xUhg4BBABGTmVgqF7Ys7Fqlkrl/VrvP1Yj8oVvlcGj8n4WNsqhIzNQ8AAARlZ14MiUw0Xlba2QMlx1Dx2ZyuCR3c+CRnmgaXZbDiOCBgCMvuoBorW+W6Ue3yA/IqEjUy5cZfiofk7oAIDRN9iMlHqEjbIRCx1llYWtDCDVrwEAY8NI1c8jHjoqCRkAcPKyNjkAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBL/H6WIJrz+0HlJAAAAAElFTkSuQmCC" alt="" width="440" height="289" />

一、自定义alert弹框知识点总结

  • 利用requireJS实现模块化管理；

  • 组合使用构造函数和原型模式实现弹框对象的创建；

  • 巧妙利用命名空间实现换肤功能；

  • 依赖jquery实现DOM操作；

  • 依赖$.extend()方法实现对象的扩展，即实现默认参数和用户传入参数；

  • 依赖jqueryUI实现弹框的拖动；

  • 自定义事件的实现原理。

二、HTML代码(index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义alert弹框</title>
<link rel="stylesheet" href="style/window_alertBox.css"/>
<script data-main="js/main.js" src="http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js"></script>
</head>
<body>
<button id="btn">弹框</button>
</body>
</html>

三、入口文件代码(main.js)

// 配置路径及别名
require.config({
baseUrl:'js',
paths:{
jquery : 'jquery-1.9.1',
jqueryUI : 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min'
}
})
// 初始化window弹框
require(['jquery','window'],function($,w){
$('#btn').on('click',function(){
var win = new w.Window();
win.alert({
title : '提示',
content : '换肤功能实现喽',
btnText : '确定按钮',
width : 500,
height : 300,
skinClassName : 'window_skin_a',
hasMask : true,
dragHandel : '.window_header',
handlerSureBtn : function(){
alert('我是点击确定按钮后的回调...');
},
hasCloseBtn : true,
handlerCloseBtn : function(){
alert('我是点击关闭按钮后的回调...');
}
});
win.on('alert',function(){ alert('点击确定按钮事件01') });
win.on('alert',function(){ alert('点击确定按钮事件02') });
win.on('close',function(){ alert('点击关闭按钮事件01') });
win.on('close',function(){ alert('点击关闭按钮事件02') });
})
})

四、弹框模块实现(window.js)

define(['jquery','jqueryUI'],function($,$UI){
var Window = function(){
this.config = {
title : '系统消息', // 弹框的标题文字
content : '内容', // 弹框的内容问题
btnText : '确定', // 弹框的按钮文字
width : 800, // 弹框的宽度
height : 500, // 弹框的高度
handlerSureBtn : null, // 弹框的按钮触发的事件
hasCloseBtn : false, // 弹框中是否显示关闭按钮
handlerCloseBtn : null, // 弹框关闭按钮触发的事件
skinClassName : null, // 弹框换肤
hasMask : true, // 弹框遮罩
isDraggable : true, // 弹框是否可拖动
dragHandel : null // 弹框中拖动的'把手'：'.window_title'
};
this.handlers = {}; // 弹框中的自定义事件集合
};
Window.prototype = {
// 自定义事件
on : function(type, handler){
if( typeof this.handlers[type] == "undefined" ){
this.handlers[type] = [];
}
this.handlers[type].push(handler);
}, fire : function(type, data){
if( this.handlers[type] instanceof Array ){
var handlers = this.handlers[type];
for( var i = 0; i < handlers.length; i++ ){
handlers[i](data);
}
}
},
// 弹框事件
alert : function(cfg){
var that = this;
var config = $.extend(this.config, cfg); // 弹框盒子
var boundingBox = $('<div class="window_boundingBox">' +
'<div class="window_header">' + config.title + '</div>' +
'<div class="window_body">' + config.content + '</div>' +
'<div class="window_footer">' +
'<input type="button" id="btn_sure" value=' + config.btnText + '>' + '</div>' +
'</div>'); boundingBox.appendTo('body'); // 定制皮肤
if(config.skinClassName){
boundingBox.addClass(config.skinClassName);
} //模态弹窗
if(config.hasMask){
var mask = $('<div class="window_mask"></div>');
mask.appendTo('body');
} //拖动属性
if(config.isDraggable){
if(config.dragHandel){
boundingBox.draggable({handle:config.dragHandel});
}else{
boundingBox.draggable();
}
} // 设置宽、高、坐标
boundingBox.css({
width: config.width,
height: config.height,
left: (config.x || (window.innerWidth - config.width)/2) + 'px',
top: (config.y || (window.innerHeight - config.height)/2) + 'px'
}) // 关闭按钮
if(config.hasCloseBtn){
var closeBtn = $('<div class="closeBtn">X</div>');
boundingBox.append(closeBtn);
$('.closeBtn').on('click',function(){
// config.handlerCloseBtn && handlerCloseBtn();
that.fire('close');
boundingBox.remove();
mask && mask.remove();
})
} // 确定按钮点击事件
$('#btn_sure').on('click',function(){
// config.handlerSureBtn && config.handlerSureBtn();
that.fire('alert');
boundingBox.remove();
mask && mask.remove();
}) // 为关闭按钮添加'close'事件
if( config.handlerCloseBtn ){
this.on('close',config.handlerCloseBtn);
} // 为确定按钮添加'alert'事件
if( config.handlerSureBtn ){
this.on('alert',config.handlerSureBtn);
}
}
}
return {
Window : Window
}
})

五、CSS样式(window_alertBox.css)

*{
margin:; padding:;
}
html,body{
width: 100%; height: 100%;
}
body{
font: 14/1.5 normal 'Microsoft YaHei'; background-color: #fff;
}/*默认样式*/
.window_boundingBox{
background-color: #fff; width: 600px; height: 360px; border: 1px solid #4d99cb; border-radius: 10px;
box-shadow: 0 0 5px rgba(0,0,0,0.3); position: fixed; overflow: hidden; z-index:;
}
.window_header{
color: #fff; width: 100%; background-color: #4d99cb; height: 36px; line-height: 36px; text-align: center;
}
.window_body{
padding: 10px;
}
.window_footer{
background-color: #dcdcdc; width: 100%; height: 36px; line-height: 36px; text-align: center;
position: absolute; bottom:;
}
.closeBtn{
border-radius: 50%; cursor: pointer; width: 20px; height: 20px; padding: 2px; text-align: center;
line-height: 20px; background-color: #fff; color: #333; position: absolute; right: 6px; top: 6px; color: #4d99cb;
}
.window_mask{
background-color: #000; opacity: 0.3; width: 100%; height: 100%; position: fixed; left:; top:; z-index:;
}/*定制皮肤*/
.window_skin_a.window_boundingBox{
border: 1px solid red;
}
.window_skin_a .window_header{
background-color:red;
}
.window_skin_a .closeBtn{
color: red;
}

参考：慕课网 / 阿当大话西游之WEB组件