Bootstrap 警报自动关闭

编程入门行业动态更新时间:2024-10-27 12:34:05

本文介绍了Bootstrap 警报自动关闭的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

我需要在单击添加到心愿单"按钮时调用提醒，并且应该在 2 秒内消失提醒.这就是我尝试的方式，但是警报一出现就会立即消失.不确定，错误在哪里.. 任何人都可以帮助我吗?

JS 脚本

$(document).ready (function(){$("#success-alert").hide();$("#myWish").click(function showAlert() {$("#success-alert").alert();window.setTimeout(function () {$("#success-alert").alert('close');}, 2000);});});

HTML 代码:

<a id="myWish" href="" class="btn btn-mini">添加到心愿单</a><a href="#" class="btn btn-mini">购买

警报框:

<button type="button" class="close" data-dismiss="alert">x</button><strong>成功！</strong>产品已添加到您的愿望清单.

解决方案

为了平滑上滑:

$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){$("#success-alert").slideUp(500);});

$(document).ready(function() {$("#success-alert").hide();$("#myWish").click(function showAlert() {$("#success-alert").fadeTo(2000, 500).slideUp(500, function() {$("#success-alert").slideUp(500);});});});

<div class="alert alert-success" id="success-alert"><button type="button" class="close" data-dismiss="alert">x</button><strong>成功！产品已添加到您的愿望清单.

My need is to call alert when I click on Add to Wishlist button and should disappear the alert in 2 secs. This is how I tried, but the alert is disappearing instantly as soon as it is appearing. Not sure, where the bug is.. Can anyone help me out?

JS Script

$(document).ready (function(){ $("#success-alert").hide(); $("#myWish").click(function showAlert() { $("#success-alert").alert(); window.setTimeout(function () { $("#success-alert").alert('close'); }, 2000); }); });

HTML Code:

<div class="product-options"> <a id="myWish" href="" class="btn btn-mini">Add to Wishlist </a> <a href="#" class="btn btn-mini"> Purchase </a> </div>

Alert Box:

<div class="alert alert-success" id="success-alert"> <button type="button" class="close" data-dismiss="alert">x</button> <strong>Success!</strong> Product have added to your wishlist. </div>

解决方案

For a smooth slideup:

$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){ $("#success-alert").slideUp(500); });

$(document).ready(function() { $("#success-alert").hide(); $("#myWish").click(function showAlert() { $("#success-alert").fadeTo(2000, 500).slideUp(500, function() { $("#success-alert").slideUp(500); }); }); });

更多推荐

Bootstrap 警报自动关闭

本文发布于:2023-11-27 16:50:48，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1638819.html