Bootstrap 如何设置打开页面10秒后 弹出模态框的效果 请列出详细代码

Posted 2023-05-06

参考技术A 让页面一开始就加载：
$(function()
$('#myModal').modal(options);
);追问

是打开页面10秒后弹出模态框。

Bootstrap 3 - 如何在单击时淡入警报框并在 3 秒后淡出

【中文标题】Bootstrap 3 - 如何在单击时淡入警报框并在 3 秒后淡出

【英文标题】：Bootstrap 3 - How to fade-in alert box on-click and fade-out after 3 seconds

【发布时间】：2014-04-04 00:59:00

【问题描述】：

我正在使用 AngularJS 和 Bootstrap 3。我的网络应用程序有一个“更新”按钮，它可以保存用户所做的任何更改。当用户单击“更新”按钮时，我想激活并淡入引导程序的警报框，显示“信息已保存”，然后在 3 秒后淡出。我不知道如何创建这个函数，可能需要一些帮助..

更新：

我决定使用这种方法：

HTML

<button type="button" class="btn btn-info" ng-click="save()">Update</button>

<div id = "alert_placeholder"></div>

JavaScript

$scope.save = function() 
    $('#alert_placeholder').html('<div class="alert alert-warning alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><span>Your information has been updated.</span></div>')
    setTimeout(function() 
        $("div.alert").remove();
    , 3000);

我想让警告框在首次出现时淡入，并在 3 秒后被移除时淡出，但我不知道如何使用我拥有的代码使其工作。

【问题讨论】：

我知道我没有回答你的问题，但你看过 toastr.js 吗？ github.com/CodeSeven/toastr 一个简洁的小库，用于显示我在与您相同的场景中使用的通知。

感谢您的建议。这正是我想要的效果。我想我会写一小段代码，因为这个特定的按钮在整个应用程序中只使用一次。不过谢谢！

【参考方案1】：

我决定使用这段代码作为替代更新指示器

http://jsfiddle.net/deC37/

<button type="button" data-loading-text="Saving..." class="btn btn-primary">Update</button>

$("button").click(function() 
var $btn = $(this);
$btn.button('loading');
// Then whatever you actually want to do i.e. submit form
// After that has finished, reset the button state using
setTimeout(function () 
    $btn.button('reset');
, 1000);

);

【参考方案2】：

我已经使用这种方法来实现闪烁

在指令中

..
element.addClass("blink");
$timeout(function ()  element.removeClass("blink"); , 600 , false);
..

而眨眼是用transition定义的

.blink  background-color : orange; transition : all linear 600ms; 

【参考方案3】：

我使用这样的东西。 （动画看起来很漂亮！）。只需添加此 JS，并将 flash 类应用于您想要消失的每个项目。 确保您也将fade-in 类添加到所有内容中！ fade-in 类带有引导程序。它将在 5 秒后淡出。

window.setTimeout(function() 
  $(".flash").fadeTo(500, 0).slideUp(500, function()
      $(this).remove();
  );
, 5000);

【讨论】：

一些笔记。至少在最新的 Bootstrap 中，“fade”和“in”类是分开的；似乎没有“淡入”。此外，上面的“.flash”应该是选择您的警报 div 的任何选择器。

【参考方案4】：

试试这样的

.fade 
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -moz-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;

.fade.in 
  opacity: 1;
  -webkit-transition: opacity 3.0s linear;
  -moz-transition: opacity 3.0s linear;
  -o-transition: opacity 3.0s linear;
  transition: opacity 3.0s linear;

您需要将淡入淡出和淡入淡出属性放在警报框和警报框隐藏。 - 但只需设置两者的过渡时间以匹配您的需要。基本上你在这里做的是设置不透明度，然后是执行此操作所需的时间长度。我们有 4 个不同时间的不同值的原因是为了使其跨浏览器兼容。