通过 Javascript / jQuery 在按钮单击时显示引导警报答案

【问题标题】：Show Bootstrap Alert on Button Click via Javascript / jQuery通过 Javascript / jQuery 在按钮单击时显示引导警报
【发布时间】：2018-02-13 20:20:16
【问题描述】：

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

我在 dismissing alerts 上参考了 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 的新手，我只是想把一些示例代码放在一起学习，所以请多多包涵。

【问题讨论】：

引导程序中包含的popper.js 的哪个版本？
嗨。我在上面重新复制了我的代码。我不小心把它从我的原始帖子中遗漏了，但 `id="buttonAlert" 实际上在我的 HTML 中。我还包括了按钮 HTML 以供参考。还是行不通？我也包含了所有必要的引导文件。
@MuhammadOmerAslam Popper.js 来自 src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js，直接来自 Bootstrap 的入门文档getbootstrap.com/docs/4.0/getting-started/introduction

标签： javascript jquery twitter-bootstrap bootstrap-4 jquery-events

【解决方案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

【讨论】：

不知道为什么我把它留在了原始帖子中，它在我实际项目的 HTML 中。我已经更新了上面的原始问题。由于某种原因，仍然无法正常工作。除了 Bootstrap 所需的 CSS 和 JavaScript 文件之外，OP 中的代码应该正是我在项目中所拥有的。
完美！非常感谢。让我问你一件事，我注意到即使在show 周围使用双引号也可以，例如$("#buttonAlert").addClass("show")。此外，我已经看到，如我的 OP 的参考链接中所列，其他人在 id 周围使用单引号，他们在 .js 文件中引用。哪个是正确的语法？
@Matthew 在 JS 中都是正确的，但是在像 PHP 这样的语言中，单引号会稍微提高性能，因为它会显示您包含在其中的确切字符串，而双引号可以有变量，并将呈现变量值

【解决方案2】：

我不确定是哪一个问题，我猜想 JQuery 处理显示和隐藏的方式与引导程序显示和隐藏的方式不同。

但是您可以使用 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>

【讨论】：

【解决方案3】：

如果你希望它完全动态并且可以在 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);
};

【讨论】：