通过 Javascript / jQuery 在按钮点击时显示 Bootstrap 警报

Question

我在这里引用了一些关于在单击按钮时显示和隐藏 Bootstrap Alert 的 其他问题，但由于某种原因我的实现不起作用。然而，我使用的是 Bootstrap 4，尽管根据我的初学者知识，事情应该仍然可以正常工作。

我参考了 Bootstrap 关于 解除警报 的文档，并且修改了他们的示例以从警报中删除 show 类，因为我只想在单击按钮时显示警报。解雇应该可以正常工作，因为警报上的关闭按钮将从 HTML 中实现。

HTML

 <!-- Alert -->
<div class="alert alert-success alert-dismissible fade" role="alert" id="buttonAlert">
    <strong>Success!</strong> You just showed an alert.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

<!-- Submit Button -->
<div class="form-group">
    <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#ModalCenter" id="modalButton">Click me</a>
    </div>
</div>

JavaScript

   $(document).ready(function() {
      $("#modalButton").click(function(){
          // alert("Success!") //Test to see if the function worked, it did
      $("#buttonAlert").show() //Shows Bootstrap alert
      })
  })

所以 JavaScript 函数的工作原理与我用 alert("Success!") 测试过的一样，但是 Bootstrap 警报行 $("#buttonAlert").show() 没有显示任何内容？

请注意，我是 Bootstrap 和 Javascript/Jquery 的新手，我只是想将一些示例代码放在一起学习，所以请多多包涵。

原文由 Matthew 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你没有任何叫做“buttonAlert”的东西。给警报 id="buttonAlert"

     <div class="alert alert-success alert-dismissible fade" role="alert" id="buttonAlert">
          <strong>Success!</strong> You just showed an alert.
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
   </div>

此外，jQuery show() 将不起作用。您需要用户 addClass('show') …

 $("#modalButton").click(function(){
      $("#buttonAlert").addClass('show')
})

https://www.codeply.com/go/57smFfXNh0

原文由 Zim 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果你想要它完全动态并且可以在 JS 中使用新的模板，你可以做这样的事情，如果你有一个 id 为“通知”的 div。我只是将消息硬编码为“成功”传递给标题，但如果您愿意，可以更改它。

它的CSS是这样的：

 #notification {
    position: fixed;
    right: 20px;
    top: 50px;
    width: 400px;
    z-index: 999999;
}

JS代码：

 const handleToastOpenAndClose = ($alert, autoCloseDelay) => {
    $alert.fadeIn();

    const fadeCall = fadingEvent => fadingEvent.slideUp(500, () => $alert.slideUp(500, () => $alert.alert('close')));
    if (autoCloseDelay) {
        var fadingEvent = $alert.fadeTo(autoCloseDelay, 500, () => fadeCall(fadingEvent));
        $alert.hover(
            () => fadingEvent.stop(),
            () => fadingEvent = $alert.fadeTo(autoCloseDelay, 500, () => fadeCall(fadingEvent))
        );
    }
};

window.toastSuccess = (message, autoCloseDelay) => {
    var html = `<div class="alert alert-success alert-dismissible hidden" role="alert">
            <div><strong>Success</strong></div>
            ${message}
            <button class="close" type="button" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">x</span>
            </button>
       </div>`;

    $('#notification').append(html);
    var $alert = $("#notification .alert:last");
    handleToastOpenAndClose($alert, autoCloseDelay);
};

原文由 Daniel Lorenz 发布，翻译遵循 CC BY-SA 4.0 许可协议