javascript - 如何使用时间指示器创建引导自动隐藏模式?
问题描述
我有一个模态调用者链接和一个模态如下:
<!-- 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)显示模式关闭的剩余时间。
解决方案
您必须使用 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);
});
});
推荐阅读
- graphql - 在 GraphQL 上登录后更新标题
- javascript - Bootstrap DataTable 无法按照插件文档中的说明工作
- c# - 使用 Roslyn 的方法的参数验证
- java - 如何使用spring boot和angularjs将JSON对象插入数据库?
- sql - 用前一天的值填充时间序列数据(周末)中的空值
- java - 为什么缓存数据不会在应用程序销毁时删除
- sql - SQL:从孩子获取父树层次结构
- spring-boot - kotlin:模拟注入的单元测试(mockK)
- mysql - MySQL:获取非 ASCII 字符的位置
- java - Spring项目中如何避免重复映射代码?