JS简单实现自定义弹窗及程序中断，继续效果

在Web开发中，我们常常为了更好的UI来自定义弹窗（提示框），下面简要介绍一下自定义弹窗的实现。浏览器默认的弹窗是有程序中断效果的，我们在自定义弹窗中如何实现这种 程序终止与继续的效果呢？

实现自定义弹窗

自定义弹窗原理
首先明白的是我们无法修改浏览器的弹窗，我们只能模拟这样一个过程。自定义弹窗的原理其实就是我们定义一个浮层，然后加上少量的JS来控制它的显示 和隐藏。

如何实现
我们需要定义一个弹窗的全局变量，或者直接覆盖 windows.alert 变量。网上好多弹窗例子写了很多内容，其实仔细分析一下，就会发现，他写的大部分内容都是样式内容，所以在有样式的情况下，我们只需要做两点：

1. 定义全局变量
2. 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 是一个回调函数 ，当点击确定或关闭弹窗后，执行这一段代码)。也就是说，我们将 我们原先代码的分成两部分，前一部分执行到弹窗，后一部分作为参数传递给弹窗，在弹窗关闭后，执行这个回调函数。