Question

我有一个名为.popup-container的纯CSS模式默认设置为display: none;，我也使用blockUI插件：http://malsup.com/jquery/block/

我使用的代码：

$(document).ready(function() { 
    $('.wait-me').click(function() { 
        $.blockUI({  message: '<h1>Loading...</h1>', css: { 
            border: 'none', 
            padding: '15px', 
            backgroundColor: '#000', 
            '-webkit-border-radius': '10px', 
            '-moz-border-radius': '10px', 
            opacity: .9,
            color: '#fff' 
        }
    }); 

    setTimeout($.unblockUI, 2000); 
});

模态代码：

.popup-container {
    background: #282828;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 0;
    z-index: 400;
    display: none;

}

.popup-container:target {
        display: block;
}

我需要在调用blockUI函数后2.5秒后显示我的模态。首先显示“正在加载...”，之后我需要显示我的模态。

现在我打电话给我的模态：

<a href="#modal" class="wait-me">show modal after 2.5 sec</a>

Answer 1

$(document).ajaxStart(myBlock).ajaxStop(myUnblock);

var doBlock = false;
function myBlock() {
    doBlock = true;
    setTimeout(function() {
        if (doBlock)
            $.blockUI({allYourSettingsDefined});
    }, 2000);
}

function myUnblock() {
    doBlock = false;
    $.unblockUI();
}

单击时显示隐藏的HTML元素超时

1 个答案: