显示隐藏的HTML元素，点击超时

Show hidden HTML element on click with timeout

本文关键字：超时 元素 隐藏 HTML 显示      更新时间：2023-09-26

我有一个纯CSS模式命名为.popup-container默认设置为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;
}

我需要使我的模态可见后2,5秒后，我调用blockUI函数。首先显示"Loading…"，然后我需要显示我的模态。

现在我这样调用模态:

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

$(document).ajaxStart(myBlock).ajaxStop(myUnblock);
var doBlock = false;
function myBlock() {
    doBlock = true;
    setTimeout(function() {
        if (doBlock)
            $.blockUI({allYourSettingsDefined});
    }, 2000);
}
function myUnblock() {
    doBlock = false;
    $.unblockUI();
}
相关文章：