colorbox 開いたウィンドウを5秒後に閉じたい

Question

colorboxを使って開いたモーダルウィンドウを5秒後に自動で閉じたいのですが、
html内で下記のようにパブリックメソッドを使っても、5秒後ではなく表示されてすぐに閉じられてしまいます。
どうやったら指定通りの時間で閉じられるでしょうか？
もしくは、n秒後にウィンドウを閉じられるjqueryモーダルウィンドウはありますでしょうか？

<script>
$(function(){
    $(".inline").colorbox({
        onComplete:function(){ setTimeout($.colorbox.close(),5000); }
    });
});
</script>

Answer 1

setTimeoutの使い方

setTimeoutの第一引数に関数を名前で渡す場合は、カッコをつけない関数名だけで渡すようにしてください。

// 引数を無名関数にする場合
setTimeout(function(){
 $.colorbox.close();
}, 1000)

// 関数名を引数として渡す場合
setTimeout($.colorbox.close, 1000)；

すぐ閉じる原因について

また、5秒待たずにcloseボタンで閉じた場合も、秒読みは続行されていますので、
下記のようなことが起こります。

1. 開いて2秒後にCloseボタンで閉じる
2. 消した直後、すぐにモーダルを開く
3. 1と並行して別のカウント開始
4. モーダルを開いてからおよそ3秒後に、1の時点でのカウントが5秒に達するため自動で閉じる
5. 直後にモーダルを開くと、2秒後に3の時点でのカウントが5秒に達するため自動で閉じる

上記の挙動が、表示されてすぐに閉じられる原因となっています。
このような事態を回避するためには、開くたびにclearTimeout()を実行し、以前のカウントを止める必要があります。

$(function() {
  var timerId;
  $(".inline").colorbox({
    onComplete: function() {
      clearTimeout(timerId); // 以前のカウント処理を停止
      timerId = setTimeout($.colorbox.close, 5000);
    }
  });
});

Comments

[sweeet.biz]

ありがとうございます！
これで動きました。
カウントのリセットまであり、非常に助かりました。

Answer 2

setTimeout に $.colorbox.close() を渡した時点で実行されているからでは。

$( function() {
    $( ".inline" ).colorbox( {
        onComplete: function() { setTimeout( function() { $.colorbox.close(); }, 5000 ); }
    } );
} );
```**動くサンプル：**[https://jsfiddle.net/hkc9yr0k/](https://jsfiddle.net/hkc9yr0k/)

Comments

[sweeet.biz]

ありがとうございます
こちらの方法で確認できました！