如何在一分钟后自动关闭引导模式对话框

Posted 2023-05-08

【中文标题】如何在一分钟后自动关闭引导模式对话框

【英文标题】：How to automatically close the bootstrap modal dialog after a minute

【发布时间】：2013-06-10 17:26:39

【问题描述】：

我在我的一个项目中使用引导模式。我正在使用计时器功能自动显示引导模式。

如果用户一分钟内没有关闭引导模式。然后它自动需要关闭引导模式。

如何设置自动关闭引导模式的定时器？

请帮我解决这个问题。

在此先感谢 :)

    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();
            

【问题讨论】：

你能显示你的代码，尤其是自动显示引导模式的定时器函数 吗？

@ShivanRaptor 包含了代码。我试过的

@slash197 现在添加了代码。

【参考方案1】：

试试

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

【讨论】：

我必须在哪里通过时间？

它工作得很好。非常感谢老兄:)

似乎在 bootstrap 3.2.0 'shown' 事件更改为 'show.bs.modal'。

@sivaprasadreddy.k 实际上是shown.bs.modal。 show.bs.modal 也存在，但不同。

【参考方案2】：

您可以将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);
);

【讨论】：

您好，感谢您的回复。我已经尝试过了，但它不起作用。

你的模态ID是什么？

只有相同的 myModal。我已经发布了上面的代码。我现在尝试过的。

没有。我没有收到任何错误。我试过 5000 来检查它。但是没有用。

其实它的定时器功能，定时器从 2 分钟开始，当它到达 1:45 时，它会打开引导模式对话框。如果用户没有单击或关闭 boostrap 模态，那么它需要在 60 秒后自动关闭。这就是我尝试做的。

【参考方案3】：

您可以将其用作：

    setTimeout(function()$('#myModal').modal('hide'),3000);

【参考方案4】：

我正在使用这种方法（bootstrap 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' 类添加到 modals 类，并将属性 data-timer="3000" 添加到 modals 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');
    );
)

【参考方案5】：

函数定义

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

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

加载中

$(window).load(function()
    $('#myModal').modal('show');
    window.setTimeout(hide_modal, 60000);
);

【参考方案6】：

试试这个，$('#someselector').modal(show: false)

【讨论】：

不包括 1 分钟倒计时。