web-dev-qa-db-ja.com

1分後にbootstrapモーダルダイアログを自動的に閉じる方法

プロジェクトの1つでbootstrapモーダルを使用しています。bootstrapモーダルを自動的に表示するために、タイマー関数を使用しています。

ユーザーがbootstrapモーダルを1分間閉じない場合、自動的にbootstrapモーダルを閉じる必要があります。

bootstrapモーダルを自動的に閉じるためのタイマーを設定するにはどうすればよいですか？

この問題の解決にご協力ください。

前もって感謝します ：）



    var mins;
            var secs;
            function cd() {
                mins = 1 * m("");
                secs = 0 + s(":"); // change seconds here (always add an additional second to your total)
                console.log(mins);
                console.log(secs);
                redo();
            }
            function m(obj) {
                for(var i = 0; i ";
                if(mins :";
                disp += "";
                if(secs ";
                return(disp);
            }
            function redo() {
                secs--;
                if(secs == -1) {
                    secs = 59;
                    mins--;
                }
                $('#myModal').on('shown', function() {
                    // remove previous timeouts if it's opened more than once.
                    clearTimeout(myModalTimeout);

                    // hide it after a minute
                    myModalTimeout = setTimeout(function() {
                        $('#myModal').modal('hide');
                    }, 5000);
                });
                document.getElementById('timer_container').innerHTML = dis(mins,secs); 
                if((mins == 1) && (secs == 45)) {
                    $("#myModal").modal('show');
                    $('#myModal').on('shown', function() {
                        // remove previous timeouts if it's opened more than once.
                        clearTimeout(myModalTimeout);

                        // hide it after a minute
                        myModalTimeout = setTimeout(function() {
                            $('#myModal').modal('hide');
                        }, 5000);
                    });
                    $('.timer-inc').click(function(){
                        $("#myModal").modal('hide');
                        href="includes/setSessionTime.php";
                        $.ajax({ 
                            type: "POST",
                            //data : {cat:"hai"},
                            cache: false,
                            url: href,   
                            success: function(data){
                                console.log(data);
                               $("#results").html(data);              
                            } 
                        });
                    });

                    $('.timer-close').click(function(){
                        $("#myModal").modal('hide');
                        href="includes/clearcart.php";
                        $.ajax({ 
                            type: "POST",
                            //data : {cat:"hai"},
                            cache: false,
                            url: href,   
                            success: function(data){
                                console.log(data);
                               $("#results").html(data);              
                            } 
                        });
                    });

                    $('#myModal').on('hidden', function () {
                        href="includes/clearcart.php";
                        $.ajax({ 
                            type: "POST",
                            //data : {cat:"hai"},
                            cache: false,
                            url: href,   
                            success: function(data){
                                console.log(data);
                               $("#results").html(data);              
                            } 
                        });    
                    });
                }
                else if((mins == 0) && (secs == 00)){
                    $("#myModal").modal('hide');
                    href="includes/clearcart.php";
                        $.ajax({ 
                            type: "POST",
                            //data : {cat:"hai"},
                            cache: false,
                            url: href,   
                            success: function(data){
                                console.log(data);
                               $("#results").html(data);              
                            } 
                        });
                }
                else {
                    cd = setTimeout("redo()",1000);
                }
            }
            function init() {
                cd();
            }
javascriptjquerytwitter-bootstrapbootstrap-modal
5
user1802184

試してみてください

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

示されているコールバックと組み合わせてsetTimeoutを使用できます。

$('#myModal').on('shown', function() {
    // remove previous timeouts if it's opened more than once.
    clearTimeout(myModalTimeout);

    // hide it after a minute
    myModalTimeout = setTimeout(function() {
        $('#myModal').modal('hide');
    }, 6e4);
});
6
Austin Brunkhorst

関数の定義

function show_modal(){
    $('#myModal').modal('show');
}   

function hide_modal(){
    $('#myModal').modal('hide');
}

読み込み中

$(window).load(function(){
    $('#myModal').modal('show');
    window.setTimeout(hide_modal, 60000);
});
2
Fernando Ingunza

あなたはこれを次のように使うことができます：

    setTimeout(function(){$('#myModal').modal('hide')},3000);
1
Kabir Hossain

これを試してください、$（ '＃someselector'）。modal（{show：false}）

0
user1390282

私はこの方法を使用しています（ブートストラップ3.2.0以降）:

自動的に閉じたいすべてのモーダルのモーダルクラスに「modal-auto-clear」を追加します。

<div class="modal fade modal-auto-clear" id="modal_confirmation" tabindex="-1" role="dialog">
    ...
</div>

jQuery内：

$('.modal-auto-clear').on('shown.bs.modal', function () {
    $(this).delay(7000).fadeOut(200, function () {
        $(this).modal('hide');
    });
})

クラス 'modal-auto-clear'のすべてのモーダルは、開いてから7秒後に閉じるようになりました（もちろん、この時間はjqueryコードで変更できます）。

モーダルごとに異なる自動クローズ時間を作成する場合は、これを行うことができます：

クラス 'modal-auto-clear'をモーダルクラスに追加し、属性data-timer = "3000"をモーダルdivに追加します。

<div class="modal fade modal-auto-clear" data-timer="3000" id="modal_confirmation" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Your title</h4>
            </div>
            <div class="modal-body padded">Your body</div>
            <div class="modal-footer">
                <button type="button" id="close" data-dismiss="modal" aria-label="Close" class="btn btn-primary" style="display:none;">Close</button>
            </div>
        </div>
    </div>
</div>

jQuery内：

$('.modal-auto-clear').on('shown.bs.modal', function () {
    // if data-timer attribute is set use that, otherwise use default (7000)
    var timer = $(this).data('timer') ? $(this).data('timer') : 7000;
    $(this).delay(timer).fadeOut(200, function () {
        $(this).modal('hide');
    });
})
0
klaaz

簡単..！ ：Dこの男を試してみてください！私を信じて。

$(window).load(function(){
setTimeout(function(){
        $('#myModal').hide();
    }, 60000);
});
0
Oshan