自定义警报框，等待输入（是/否），直到恢复javascript

我正在为我的网站使用放大弹出窗口，并发现此脚本用于创建警报/确认框：

var confirmDialog = function(headline, message, yes, no) {

        var dialog = '<div class="dialog confirm mfp-with-anim white-popup-block white-popup-block2">';
        if (headline) {
            dialog += '<h2>' + headline + '</h2>';
        }
        dialog += '<div class="content"><p>' + message + '</p></div><hr/>';

        dialog += ' <div class="product-action center">';
        dialog += '     <button type="button" class="btn btn-primary btn-submit greenback">' + yes + '</button> ';
        if(no){
            dialog += '     <button type="button" class="btn btn-default btn-cancel">' + no + '</button>';
        }
        dialog += ' </div>';
        dialog += '</div>';

        $.magnificPopup.open({
            modal: true,
            items: {
                src: dialog,
                type: 'inline'
            },
            callbacks: {
                open: function() {
                    var $content = $(this.content);

                    $content.on('click', '.btn-submit', function() {
                        $.magnificPopup.close();
                    });

                    $content.on('click', '.btn-cancel', function() {
                        event.preventDefault();
                        $.magnificPopup.close();

                    });
                }
            }
        });
    };

或

但正如我所说，情况可能会大不相同。在默认和“是”被触发后，吸引链接并调用该位置是没有意义的

在调用preventDefault之后提交将是另一个问题，在第二个示例中，这个问题不容易解决

---

解决此问题的最佳方法是什么？

实际上，这不可能那么容易，因为自定义对话框不会像内置的警报或确认函数那样停止javascript执行。无论如何，我对自定义控件不太熟悉。。我是你的朋友。 首先，确保将事件作为参数传递，例如

<button onclick="call(event, 'a', 'b')">click</button>

---

这只是一个未经测试的示例代码。。给你一个提示，帮助你理解为什么你必须在这里使用事件。如果您在实现它时遇到问题，请告诉我。

您不能像确认或警报那样暂停JavaScript执行

您需要使用以下备选方案：

<a style="cursor: pointer;" onclick="confirmDialog('head', 'text', 'yes', 'no', 'de/site.html/del/46');">CLICK</a>

脚本：

    var confirmDialog = function(headline, message, yes, no, url) {

    var dialog = '<div class="dialog confirm mfp-with-anim white-popup-block white-popup-block2">';
    if (headline) {
        dialog += '<h2>' + headline + '</h2>';
    }
    dialog += '<div class="content"><p>' + message + '</p></div><hr/>';

    dialog += ' <div class="product-action center">';
    dialog += '     <button type="button" class="btn btn-primary btn-submit greenback">' + yes + '</button> ';
    if(no){
        dialog += '     <button type="button" class="btn btn-default btn-cancel">' + no + '</button>';
    }
    dialog += ' </div>';
    dialog += '</div>';

    $.magnificPopup.open({
        modal: true,
        items: {
            src: dialog,
            type: 'inline'
        },
        callbacks: {
            open: function() {
                var $content = $(this.content);

                $content.on('click', '.btn-submit', function() {
                    $.magnificPopup.close();
                    window.location.href=url
                });

                $content.on('click', '.btn-cancel', function() {
                    event.preventDefault();
                    $.magnificPopup.close();

                });
            }
        }
    });
};

---

您可以执行event.preventDefault并获取href属性$this.attrref；并将其保存在confirmDialog函数内的变量中，用户提交后，可以使用window.location.href将位置指向变量中保存的href属性

为什么要使用此行$document。在“keydown”上，keydowHandler？它监听整个文档上的任何按键，并自动执行点击弹出式打开器。你能试着注释这一行吗？这不是我的代码，但在ESC上，触发“否”，并在该示例中输入“是”。我可以在没有按键的情况下生活。为什么你要初始化插件打开函数的事件？@madalinivascu直到模式打开，Html才出现在代码中。因此，当模态为载荷时，需要对其进行初始化。但是，是的，我可以用一个函数在外部初始化它，并在这里调用该函数。您可以尝试从表单中删除onsubmit，并从按钮中删除type=submit，然后改为设置onclick！然后在脚本中的.btn submit中只需执行$'delform2'。submit；

function call(e, a, b) {
    console.log(e.target);
    console.log(a);
    console.log(b);

    // showDialog + attach custom handler using the target and the function, e.g.
    // dialog.onOK = function(e) { .. do something .. };
    return false;
}

<a style="cursor: pointer;" onclick="confirmDialog('head', 'text', 'yes', 'no', 'de/site.html/del/46');">CLICK</a>

    var confirmDialog = function(headline, message, yes, no, url) {

    var dialog = '<div class="dialog confirm mfp-with-anim white-popup-block white-popup-block2">';
    if (headline) {
        dialog += '<h2>' + headline + '</h2>';
    }
    dialog += '<div class="content"><p>' + message + '</p></div><hr/>';

    dialog += ' <div class="product-action center">';
    dialog += '     <button type="button" class="btn btn-primary btn-submit greenback">' + yes + '</button> ';
    if(no){
        dialog += '     <button type="button" class="btn btn-default btn-cancel">' + no + '</button>';
    }
    dialog += ' </div>';
    dialog += '</div>';

    $.magnificPopup.open({
        modal: true,
        items: {
            src: dialog,
            type: 'inline'
        },
        callbacks: {
            open: function() {
                var $content = $(this.content);

                $content.on('click', '.btn-submit', function() {
                    $.magnificPopup.close();
                    window.location.href=url
                });

                $content.on('click', '.btn-cancel', function() {
                    event.preventDefault();
                    $.magnificPopup.close();

                });
            }
        }
    });
};