我需要在单击添加到心愿单"按钮时调用提醒,并且应该在 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);});});});<link rel="stylesheet" href="stackpath.bootstrapcdn/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><div class="product-options"><a id="myWish" href="javascript:;"class="btn btn-mini"> 添加到愿望清单 </a><a href="" class="btn btn-mini">购买<div class="alert alert-success" id="success-alert"><button type="button" class="close" data-dismiss="alert">x</button><strong>成功!产品已添加到您的愿望清单.
<script src="cdnjs.cloudflare/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="stackpath.bootstrapcdn/bootstrap/4.3.1/js/bootstrap.min.js"integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+jRMB"cross/script>
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); }); }); });
<link rel="stylesheet" href="stackpath.bootstrapcdn/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <div class="product-options"> <a id="myWish" href="javascript:;" class="btn btn-mini">Add to Wishlist </a> <a href="" class="btn btn-mini"> Purchase </a> </div> <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> <script src="cdnjs.cloudflare/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="stackpath.bootstrapcdn/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
更多推荐
Bootstrap 警报自动关闭
发布评论