9

我正在尝试打开一个没有按钮的 jQuery 对话框来显示一些动画，然后自动在那里停留 3 秒钟，然后关闭。这是我认为应该起作用的 jsfiddle，但正如您所见，它只是打开和关闭而无需等待 3 秒：

jsfiddle：http: //jsfiddle.net/WrdM9/1/

有谁知道如何解决这个问题？谢谢！

4

5 回答 5

18

你应该使用setTimeout：

open: function(event, ui) {
    setTimeout(function(){
        $('#dialog').dialog('close');                
    }, 3000);
}

这是小提琴：http: //jsfiddle.net/WrdM9/2/

于 2012-04-16T17:52:09.057 回答
2

使用 jQuery 延迟函数，例如

$( "#your-modal-id" ).slideDown( 300 ).delay( 800 ).slideUp( 400 );
于 2016-03-24T23:10:18.007 回答
1

如果您还想添加一些过渡，我不推荐使用 jQuery slideUp 和 slideDown 动画。这些很慢，因为它使用 CPU 而不是 GPU，而且动画本身感觉并不完全正确。

我会推荐Velocity.js。记得还要添加 Velocity UI js。你可以这样做：

$( "#your-modal-id" ).velocity('transition.slideUpBigOut', { delay: 3000 })
于 2016-06-04T16:27:54.273 回答
0

以下是仅使用 jQuery、CSS 和 JavaScript 并重复使用定时弹出窗口的方法，每次都带有不同的消息。此外，此示例不仅关闭，而且逐渐关闭。

首先，创建一个样式来移除标题栏。如果您愿意，您还可以为警报框添加样式。

<style>
.noTitleStuff .ui-dialog-titlebar {display:none;}
</style>

接下来，定义一个模态对话框。不要忘记在您的页面中包含 jQuery。请注意，如果未定义按钮，则下方的按钮区域将自动不显示。您还可以选择添加打开和关闭功能。

<script type="text/javascript">
//-- dialog-form0 - Modal Alert --//
$( ".dialog-form0" ).dialog({
    autoOpen: false,
    height: 50,
    width: 600,
    modal: true,
    dialogClass: 'noTitleStuff',
    buttons: {
    },
    open: function() {
    },
    close: function() {
    }
});
</script>

现在创建一个 div 用作弹出窗口...

<!-- Popup0 for alert -->
<div id="popup0" class="dialog-form0" title="">
    <div id="alert0"></div>
</div><!--// popup0 -->

最后，只要您想使用定时“警报框”（实际上是无边界模式弹出窗口），请包含以下代码块。

<script type="text/javascript">
$(function(){
    $("#clientcustomer").on("change", function(event){
        event.preventDefault();
        document.getElementById('alert0').innerHTML = "Here's an alert message...";
        $( ".dialog-form0" ).dialog( "open" );
        setTimeout(function(){
            $("#popup0" ).fadeOut(1000, function () { });   //This is the fade time
            setTimeout(function(){
                $( ".dialog-form0" ).dialog( "close" )
            },850); // set the time here for close delay
            //$( ".dialog-form0" ).dialog( fadeOut(2000) );
        },500); // set the time here for how long to display
    });
});
</script>

你的关闭延迟时间应该是淡入淡出时间的 80% 到 90%。如果相同，您会在关闭和消失之前看到一个空的小矩形。你想要的是在模态框改变大小之前淡出文本但关闭。

于 2018-07-13T00:38:54.200 回答
0 
setTimeout(function() {
    $('#bkgOverlay').fadeOut(400);
}, 6000);
于 2018-10-04T08:11:49.647 回答