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

Question

我在此处引用了一些 other questions 关于在单击按钮时显示和隐藏 Bootstrap 警报的内容，但由于某些原因，我的实现无法正常工作。我正在使用 Bootstrap 4，但是，尽管根据我的初学者知识，事情应该仍然可以正常工作。

我参考了 Bootstrap 关于 dismissing alerts 的文档，并且我已经修改了他们的示例以从警报中删除 show class，因为我只是想要在单击按钮时显示警报。解雇应该可以正常工作，因为警报上的关闭按钮将从 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 的新手，我只是想将一些示例代码放在一起学习，所以请多多包涵。

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

Answer 2

我不确定是哪一个问题，我猜 JQuery 处理显示和隐藏的方式不同于 bootstrap 显示和隐藏。

但是您可以使用 Jquery $("#buttonAlert").hide() 隐藏成功消息，然后使用 $("#buttonAlert").show();

$(document).ready(function() {
  $("#buttonAlert").hide()
  $("#modalButton").click(function() {
    $("#buttonAlert").show()
  })
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Test page</title>
</head>

<body>
  <!-- Alert -->
  <div class="alert" 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>
</body>

</html>

Answer 3

如果您希望它完全动态并且可以在 JS 中使用新的模板，如果您有一个 ID 为 "notification" 的 div，您可以这样做。我只是为标题传递消息 hard-code "Success"，但如果您愿意，可以更改它。

它的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);
};

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

Show Bootstrap Alert on Button Click via Javascript / jQuery

javascript

jquery

twitter-bootstrap

jquery-events

bootstrap-4