如何使用时间指示器创建引导自动隐藏模式？

Posted 2023-05-08

【中文标题】如何使用时间指示器创建引导自动隐藏模式？

【英文标题】：How can I create bootstrap auto hide modal with time indicator?

【发布时间】：2021-10-15 04:16:14

【问题描述】：

我有一个模态调用者链接和一个模态如下：

<!-- modal caller -->
<a href="#" data-toggle="modal" data-target="#modal">CALL MODAL</a>
<!-- modal -->
<div id="modal" class="modal auto-hide-modal" data-time="3000" data-backdrop="static" data-keyboard="false" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">MY TITLE</h5>
            </div>
            <div class="modal-body">MY TEXT</div>
            <div class="modal-footer">
                <div class="progress" style="height: .25rem;">
                    <div id="time_indicator" class="progress-bar" role="progressbar"></div>
                </div>
            </div>
        </div>
    </div>
</div>

我有这些脚本：

$(document).on('shown.bs.modal', '.auto-hide-modal', function () 
    var time = $(this).data('time');
    $(this).delay(time).fadeOut(300, function () 
        $(this).modal('hide');
    );
);

到目前为止，一切都很好。 我希望进度条（time_indicator）显示模态关闭的剩余时间。

【参考方案1】：

您必须使用jQuery animate functoin 并将动画速度设置为时间。然后将宽度重置为0；所以下次您打开模态时，动画会再次执行。

CSS：

#time_indicator 
  width: 0;

javascript：

$(document).on('shown.bs.modal', '.auto-hide-modal', function () 
    var time = $(this).data('time');
    $("#time_indicator").animate(width: "100%", time);
    $(this).delay(time).fadeOut(300, function () 
        $(this).modal('hide');
        $("#time_indicator").css("width", 0);
    );
);