以编程方式打开引导警报答案

【问题标题】：Opening Bootstrap Alert programmatically以编程方式打开引导警报
【发布时间】：2019-10-17 15:56:24
【问题描述】：

我正在尝试动态显示引导警报 https://getbootstrap.com/docs/4.3/components/alerts/ 一旦用户单击“确定”按钮，就会显示一条使用 cookie 接受的消息，警报消息应该消失，并且在该会话期间不会再次显示给该用户。

不幸的是，我在引导站点上找不到允许以编程方式打开引导警报的文档。因此，每次刷新网站时，都会再次弹出警报。

 <div class="alert fade show cookie-alert" role="alert" data-dismiss="alert">
            <div class="container">
                This website stores cookies. These cookies are used to collect information about how you interact with our website, we use this information to improve and customize your browsing experience. Read our <a target="_blank" href="http://assets.investnow.ng/InvestNow_TC.pdf" style="color:gray;font-weight:bold">terms and conditions</a> to learn more.
                <button type="button" class="btn btn-danger btn-sm pull-right cookie-btn okbtn" data-dismiss="alert" aria-label="Close">OK</button>
            </div>
        </div>

【问题讨论】：

它不会打开警报，我已经尝试过了。
我已将我正在使用的 HTML sn-p 添加到问题中。
正如你所说，这是一个“引导警报”，而不是“模式”（当你说“打开警报”时有点混乱，因为你没有“打开”警报，您“打开”一个对话框）。您可以简单地不显示警报，然后仅在需要时显示它。 <div class='alert style='display:none;'` if (showalert) $(".alert").slideDown().您还可以将内联 javascript 与 document.write 一起使用，以便仅在需要时输出警报，但大多数人会建议不要这样做。

标签： javascript jquery html session-storage alerts

【解决方案1】：

如果用户关闭了 cookie 警报，您可以存储在 localStorage 中。

在页面加载时，您将检查密钥是否已设置，如果没有设置则显示警报：

if (!localStorage.getItem('cookie-alert-dismissed')) {
    $('#cookie-alert').show()
}

然后在用户关闭警报时添加：

$('#cookie-alert button').click(function() {
    $('#cookie-alert').hide()
    localStorage.setItem('cookie-alert-dismissed', 1);
});

此密钥将一直存在，直到用户清空其 localStorage 或使用不同的浏览器。

【讨论】：

感谢您的回复...它部分解决了问题，但同样，我还没有找到在引导警报上实际执行 $('#cookie-alert').show() 的方法getbootstrap.com/docs/4.3/components/alerts 注意：我使用的不是模式，而是警报。
我已将我正在使用的 HTML sn-p 添加到问题中。

【解决方案2】：

请在下面找到代码

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</head>
<body>
<div class="alert  alert-dismissible">
    <div class="container">
                This website stores cookies. These cookies are used to collect information about how you interact with our website, we use this information to improve and customize your browsing experience. Read our <a target="_blank" href="http://assets.investnow.ng/InvestNow_TC.pdf" style="color:gray;font-weight:bold">terms and conditions</a> to learn more.
                <button type="button" id="alertClose" class="btn btn-danger btn-sm pull-right cookie-btn okbtn" data-dismiss="alert" aria-label="Close">OK</button>
            </div>


<script>
$(document).ready(function(){
localStorage.setItem("acceptCookies", true);
 $(".alert").hide();
 if (typeof(Storage) !== "undefined") {
  if (localStorage.getItem("acceptCookies")) {
    $(".alert").show();
    $("#alertClose").click(function(){
      localStorage.setItem("acceptCookies", "accepted");
      $(".alert").alert("close");
    });
  }
 } 
});
</script>

</body>
</html>

【讨论】：

感谢@chans，如果我使用的是模式但我使用的是警报，它可以解决问题，因此 $("#alert").show() 将不起作用。 getbootstrap.com/docs/4.3/components/alerts 没有显示如何使用 JS 触发警报 $('.alert').alert() 也不起作用。
我已将我正在使用的 HTML sn-p 添加到问题中。