JS~重写alter与confirm，让它们变成fancybox风格

2021-10-17 12:04:40

插件与系统命令

对于很多JS弹框插件来说，都提供了alter,confirm等功能，如fancybox,Boxy等插件，今天来介绍一下如何将系统的alter和confirm替换成指定插件的alter和confirm，使用替换的方式的好处就是不用修改之前的代码，这在面向对象里，

叫做“对修改关闭，对扩展开放”，也称为OCP原则，即开闭原则。

fancybox替换系统命令，它需要有一个HTML容器来展现弹框

<script id="MessageBox_delete" type="text/html">

    <!--试题删除确认弹出框 start-->

    <div class="r_warnBox" style="width: 276px;">

        <div class="r_warnBox_tit">

            <h3><strong>提示</strong></h3>

        </div>

        <div class="r_roomBoxContDel">

            <p class="alert">您确定删除作业吗？</p>

            <p class="confirm"><a class="sure" href="javascript:;">确定</a><a class="cancel" href="javascript:;" onclick="$.fancybox.close();">取消</a></p>

        </div>

        <a class="r_warnBox_close" href="javascript:;" onclick="$.fancybox.close();"></a>

    </div>

    <!--试题删除确认弹出框 end-->

</script>

<!--弹出框1 start-->

<script id="MessageBox_message" type="text/html">

    <div class='r_warnBox' style='width: 433px; padding-right: 30px;'>

        <div class='r_warnBox_tit'>

            <h3><strong>提示

            </strong></h3>

        </div>

        <div id='alert_message' class='r_roomBoxCont'>

            <p class='alert'>[Content]</p>

        </div>

        <a class='r_warnBox_close' href='javascript:;' onclick="$.fancybox.close()"></a>

    </div>

</script>

<!--弹出框1 end-->

下面是复写语句

 window.alert = function (msg) {

        var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm'); //i g m是指分别用于指定区分大小写的匹配、全局匹配和多行匹配。

        var html = document.getElementById("MessageBox_message").innerHTML;

        var result = html.replace(reg, function (node, key) { return { 'Content': msg }[key]; });

        $.fancybox(result, {

            'padding': 0,

            'scrolling': 'visible',

            'closeBtn': false,

            'modal': false

    });

    }

    window.confirm = function (msg, callBack) {

        $.fancybox($("#MessageBox_delete").html(), {

            'padding': 0,

            'scrolling': 'visible',

            'closeBtn': false,

            'modal': false,

            afterShow: function () {

                $('p.confirm a.sure').on('click', function () {

                    callBack();

                });

            }

        });

    }

下面是调用语句

function alerttest() {

        alert("ok");

    }

    function confirmtest() {

        confirm("are you sure!", function () { alert("删除成功") });

    }

Boxy替换系统命令，使用相对简单，它已经为我们创建的弹框的DIV

window.alert = function (msg) {

  Boxy.alert(msg);

}

window.alert = function (msg,callback) {

  Boxy.confirm(msg,callback);

}

调用和fancybox也是一样的

  function alerttest() {

        alert("ok");

    }

  function confirmtest() {

        confirm("are you sure!", function () { alert("删除成功") });

    }

最后运行效果如图

aaarticlea/png;base64,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" alt="" />

aaarticlea/png;base64,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" alt="" />

码农公寓