Question

我正在尝试打开一个jQuery对话框，没有按钮显示一些动画，然后自动停留3秒钟，然后关闭。这是我认为应该起作用的一个方面，但正如你所看到的那样只需3秒就可以打开和关闭：

任何人都知道如何理顺这一点？谢谢！

Answer 1

您应该使用setTimeout：

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

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

Answer 2

使用jQuery延迟功能，例如

$( "#your-modal-id" ).slideDown( 300 ).delay( 800 ).slideUp( 400 );

Answer 3

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

我建议改为Velocity.js。还记得添加Velocity UI js。你可以这样做：

$( "#your-modal-id" ).velocity('transition.slideUpBigOut', { delay: 3000 })

Answer 4

在这里，您可以仅使用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％。如果相同，在关闭和消失之前，您会看到一个空的小矩形。您想要的是淡出文本但在模式框更改大小之前将其关闭。

Answer 5

setTimeout（function（）{
$（'＃bkgOverlay'）。fadeOut（400）;
}，6000）；

jQuery对话框打开并在3秒后自动关闭

5 个答案: