我该如何关闭Modal弹出窗口jquery

时间:2013-08-18 07:56:13

标签: javascript ajax jquery modal-dialog

我的视图页面上有一个按钮,只要点击它,就会出现一个弹出模式...现在我要关闭那个模态......

这是我的代码

function openSirenModal() {
var timeout;
var progress;
var status;

$.modal({
    contentAlign: 'center',
    width: 240,
    title: 'Loading',
    content: '<div style="line-height: 25px; padding: 0 0 10px"><span id="modal-status">Contacting to the device...</span><br><span id="modal-progress">0%</span></div>',
    buttons: {},
    scrolling: false,
    actions: {
        'Cancel': {
            color: 'red',
            click: function (win) {
                win.closeModal();
            }
        }
    },
    onOpen: function () {
        // Progress bar
        var progress = $('#modal-progress').progress(100, {
            size: 200,
            style: 'large',
            barClasses: ['anthracite-gradient', 'glossy'],
            stripes: true,
            darkStripes: false,
            showValue: false
        }),

            // Loading state
            loaded = 0,

            // Window
            win = $(this),

            // Status text
            status = $('#modal-status'),

            // Function to simulate loading
            simulateLoading = function () {




            };

        // Start
        //timeout = setTimeout(simulateLoading, 2500);
    },


    onClose: function () {
        // Stop simulated loading if needed
        clearTimeout(timeout);
    }


});

var siren = "siren";
$.ajax({
    type: "POST",
    data: {
        value: siren
    },
    url: "http://localhost/siren/siren/",

    success: function (data) {
        alert(data);
        if (data == 1) {

            var auto_refresh = setInterval(
                function () {
                    $.get('siren/sirenjson', function (datas) {

                        if (datas == 1) {

                            $('#modal-progress').hideProgressStripes().changeProgressBarColor('green-gradient');
                            $('#modal-status').text('success!');
                            setTimeout(function () {
                                clearInterval(auto_refresh);
                                win.closeModal();//here i want to close the popup modal
                            }, 1500);


                        }
                    });

                }, 1000);





        } else {

        }

        //clearTimeout(timeout);
    },
    error: function () {

        alert("error");
        progress.hideProgressStripes().changeProgressBarColor('red-gradient');
        setTimeout(function () {
            win.closeModal();
        }, 1500);
        status.text('error!');
    }
});

 };

我已编写代码win.closeModal();但它无法正常工作,因为我无法访问setInterval中的win变量。我不知道如何访问它

1 个答案:

答案 0 :(得分:0)

<div id="modal">Modal text <br /><button type='button' class='close'>CLOSE</button></div>

$('.close').on('click', function(){ 
         $.modal.close();
         $('#modal, #open_modal').toggle();
    });

如果您可以跳过closeModal();

,请尝试此操作

<强> JSFIDDLE TRIAL