web-dev-qa-db-ja.com

自動的に閉じる方法Bootstrap 3時間後にモーダル

Bootstrap=モーダルを一定時間後に自動的に閉じるのに苦労しています。

これは、4秒でモーダルを閉じるために使用しているjsコードです。

setTimeout(function() { $('#myModal').modal('hide'); }, 4000);

2つの基本的な問題：

（A）HTMLページ（モーダルを含む）が読み込まれると、モーダルが表示される前に、モーダルタイムアウトが実行されるようです。モーダルは、ページ内のリンクをクリックした後に表示されるように設定されています。ページが読み込まれたときにリンクがクリックされないすぐに場合、モーダルは短時間だけ表示されますそして、モーダルが表示されたときではなく、htmlページがロードされたときにタイムアウト期間が本質的に開始したため、すぐに閉じます。

（B）ユーザーがリンクをもう一度クリックしてモーダルを起動した場合（または3回目、4回目など）、モーダルは正しく表示されますが、時間が経過すると閉じません。ユーザーが手動で閉じるまで開いたままです。

だから... 2つの質問は：

（1）クロックを実行する前にモーダルが表示されるまで待機するモーダルタイムアウト期間を取得するにはどうすればよいですか。

（2）適切なタイムアウト機能がまだ機能している状態で、モーダルに2回目と3回目を表示させるにはどうすればよいですか？

（以下のこのリンクで提案された回答は有望であるように見えましたが、私にとっては機能しません。おそらくBootstrap 3？で機能しませんか？ bootstrap 1分後のモーダルダイアログ ）

以下のコードは非常に有望に見えましたが、「shown」を「shown.bs.modal」に変更しても機能しませんでした。それとも、このコードを間違った場所に配置していますか？

var myModal = $('#myModal').on('shown', function () {
    clearTimeout(myModal.data('hideInteval'))
    var id = setTimeout(function(){
        myModal.modal('hide');
    });
    myModal.data('hideInteval', id);
})

提案をありがとう！

javascripttwitter-bootstrapbootstrap-modal
7
b-kat

私はあなたのhtmlについてよくわからないので、完全な例を実行しました：

html：

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Open Modal</a>

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                <h4>Header</h4>
            </div>
            <div class="modal-body">
                Modal Content
            </div>
        </div> 
    </div>
</div>

js：

$(function(){
    $('#myModal').on('show.bs.modal', function(){
        var myModal = $(this);
        clearTimeout(myModal.data('hideInterval'));
        myModal.data('hideInterval', setTimeout(function(){
            myModal.modal('hide');
        }, 3000));
    });
});

コードとの主な違い：

  1. タイムアウトの時間を設定しました（3000）
  2. コールバック内にmyModal変数を設定しました
14
Aguardientico

モーダルをどのように表示するかによります。しかし、イベントリスナーでタイムアウトを設定できますか？

以下に JSFiddle を示し、これをどのように実現できるかを示します。基本的に、イベントが発生したときに実行される関数にタイムアウトを追加します。

_// Select the element you want to click and add a click event
$("#your-link").click(function(){
    // This function will be executed when you click the element
    // show the element you want to show
    $("#the-modal").show();

    // Set a timeout to hide the element again
    setTimeout(function(){
        $("#the-modal").hide();
    }, 3000);
});
_

リッスンするイベントがリンクのクリックである場合は、event.preventDefault()を使用してデフォルトのアクションも防止する必要があります。あなたはそれについてより多くの情報を見つけることができます ここ

これがお役に立てば幸いです。

10
Mathieu David