在Web开发中，我们常常为了更好的UI来自定义弹窗（提示框），下面简要介绍一下自定义弹窗的实现。浏览器默认的弹窗是有程序中断效果的，我们在自定义弹窗中如何实现这种 程序终止与继续的效果呢？
实现自定义弹窗
自定义弹窗原理
首先明白的是我们无法修改浏览器的弹窗，我们只能模拟这样一个过程。自定义弹窗的原理其实就是我们定义一个浮层，然后加上少量的JS来控制它的显示 和隐藏。
如何实现
我们需要定义一个弹窗的全局变量，或者直接覆盖 windows.alert 变量。网上好多弹窗例子写了很多内容，其实仔细分析一下，就会发现，他写的大部分内容都是样式内容，所以在有样式的情况下，我们只需要做两点：
- 定义全局变量
- JS控制弹窗的显示隐藏
弹窗实现代码
下面是我们项目自定义弹窗的全部代码，定义了一个分部视图，直接将这部分代码引入，便可直接使用。
此处定义的弹窗的名称为 “AskAlert”，我们可以直接 使用 window.alert = function()
这样当我们使用 alert 时便可以弹出我们自定义的弹窗。
<div id="AskAlert" class="pop6_7 pop6_12" style="display:none;">
<div class="mask_67"></div>
<div class="popWin">
<div class="btn-cls"></div>
<p id="AlertMessage" class="pop_f16_p"></p>
<div class="btnBox clearfix">
<a id="AlertBtn" href="javascript:void(0)" class="cur">确 定</a>
</div>
</div>
</div>
<script>
/**思路
*1. 定义一个全局函数，window.alert 或者 自定义（如：askAlert）
*2. 在此函数中控制弹窗样式（浮层）的显示与隐藏
*3. 此函数至少有一个参数（如：msg），作为弹窗中显示信息
*4. 如需模拟JS中断、继续效果，需要增加 回调函数参数，如：callbakc
*/
$(function () {
/**
* 弹窗
* author: by wys
*constructor
*/
askAlert = function (msg,callback) {
// 打开弹窗
$('#AskAlert').show();
$('#AlertMessage').html(msg);
//关闭弹窗
$('#AlertBtn').unbind('click').bind('click', function () {
$('#AskAlert').hide();
$('#AlertMessage').html('');
if (callback != undefined && typeof(callback) == 'function') {
callback();
}
});
};
});
</script>实现弹窗中断、效果
在上文中，我们提到过我们无所修改浏览器的弹窗，所以我们的弹窗无法做到程序的中断效果，但是我们只能模拟这样一个过程。假如我们要实现 一个弹窗，当我们点击确定之后程序才会继续执行，这种应该如何实现呢？ （以下思路借鉴了网上搜到的大神的思路，回头找的时候，找不到联接了就不发了）
我们 可以 在 弹窗函数中，添加两个参数msg，callback。(msg作为显示的信息，而callback 是一个回调函数 ，当点击确定或关闭弹窗后，执行这一段代码)。也就是说，我们将 我们原先代码的分成两部分，前一部分执行到弹窗，后一部分作为参数传递给弹窗，在弹窗关闭后，执行这个回调函数。