Question

我正在尝试将多个对话框添加到页面上，然后在用户单击每个对话框中的“okay”按钮时显示第一个和后续的对话框。我已经非常接近，但它并不是很有效。我的问题是，我不知道如何关闭点击模式，然后按顺序显示下一个模态。任何帮助非常感谢！???

感谢，

标记

<div class="mymodal" style="display: none">
    <!-- inject modal content into here -->
</div>

javascript代码

(function(ns) {

  var modalArray = [];

  ns.calculateWhatModalsWeNeed = function () {

    $.ajax({
        url: serviceUrl,
        cache: 'testurl',
        data: myData,
        type: 'post',
        success: function (data) {
            // based on the response an array is built up
            // i.e.
            modalArray.push('modal1');
            modalArray.push('modal2');

            ns.loadModals(modalArray, ns.showModal());  
        },
        dataType: 'json',
        contentType: "application/json; charset=utf-8"
    });

  };

  ns.loadModals = function(modalsToShow, callback) {

    // call and load the modal mark up into the DOM
    for (var i = 0; i < modalsToShow.length; i++) {

        var successCallBack = function (html) {
            $('.mymodal').append(html);
        };

        // Load modal window onto page
        var modalUrl = 'myurl' + modalsToShow[i];

        // ajax command to call the mvc controller
        // the modalsToShow array are the view names
        // i.e. 'myurl' + '/' + modalsToShow[i];

        ajaxcommand.get(...);
    }

    if (callback && typeof (callback) === 'function') callback();

};

ns.showModal = function () {

    // this is the problem i think - how to 
    // trigger each modal here as you click okay on each one..?

    $('mymodal:first').dialog({
        width: 633,
        closeOnEscape: true,
        modal: true
    });
};

})(namespace('stackoverflow.problem'));

Answer 1

您需要在对话框中使用 close 事件。

$('mymodal:first').dialog({
    width: 633,
    closeOnEscape: true,
    modal: true,
    close: function(event, ui) {
        // do something...    
    }
});

您也可以像这样绑定事件监听器：

$( ".selector" ).on( "dialogclose", function( event, ui ) {} );

在旁注中，您在.课程之前缺少mymodal。

单击每个连续模态中的按钮时如何显示多个模态

1 个答案: