jquery - jQueryダイアログが開き、3秒後に自動的に閉じます

Question

いくつかのアニメーションで表示するボタンのないjQueryダイアログを開いてから、3秒間ほど自動的にそこにとどまり、閉じようとしています。これが私がうまくいくと思うもののjsfiddleですが、ご覧のとおり、3秒待たずに開閉するだけです。

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

誰もがこれをまっすぐにする方法を知っていますか？ありがとう！

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アニメーションはお勧めしません。GPUの代わりにCPUを使用し、アニメーション自体が完全に正しく感じられないため、これらは低速です。

代わりにVelocity.jsをお勧めします。VelocityUIjsも追加することを忘れないでください。そして、あなたはこのようなことをすることができます：

$( "#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);