没有 HTML 的引导警报模式 [重复]答案

【问题标题】：Bootstrap alert modal without HTML [duplicate]没有 HTML 的引导警报模式 [重复]
【发布时间】：2018-08-10 02:23:27
【问题描述】：

一个很简单的问题，但令人惊讶的是，找不到任何答案。

我希望在浏览器中提醒一些东西，非常类似于

alert('please try again');

我想为此使用引导程序，我试过了

$("#div-alert").html("please try again");
$("#div-alert").modal('show');

这不起作用，没有模式显示。

我不想在这里使用任何 HTML，只是 javascript。我知道还有其他警报系统，例如swal，但我只想使用引导程序。

【问题讨论】：

好吧，你必须用 javascript 构建 html 并将其插入到 DOM 中......我敢肯定这比仅仅添加几行 html 更麻烦适当的课程。也就是说，#div-alert 是什么？它已经是一个合适的引导模式了吗？
不，我不想深入研究 HTML，我没有这样做的权限，只想在引导程序中显示警报模式
不，它已经不是引导模式，我需要通过为它添加一个类来使其成为模式？

标签： twitter-bootstrap twitter-bootstrap-3 bootstrap-modal bootstrap-4

【解决方案1】：

您可以在引导程序中组合警报和模式。试试下面的 sn-p。

第 1 步 - 包含引导 cdn 或下载它们的文件并将它们插入到您的 html 中 https://getbootstrap.com/docs/4.0/getting-started/introduction/

第 2 步 - 参考引导模式和警报 https://getbootstrap.com/docs/4.0/components/modal/ https://v4-alpha.getbootstrap.com/components/alerts/

假设您在这种情况下使用 bootstrap 4。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Alert with Modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="alert alert-danger" role="alert">
      <strong>Oh snap!</strong> Change a few things up and try submitting again.
    </div>
  </div>
</div>

【讨论】：

OP 没有添加/修改任何 HTML 的权限。想要通过 JS 来完成这一切......在 Bootstrap 中为模式添加 HTML 似乎不是 OP 的解决方案
所以你可以在 javascript 中添加所有 html 部分吗？
这不是你的答案，对吧？

【解决方案2】：

如果您愿意，可以在 JS/JQuery 中动态创建模态元素。

创建后，您需要向现有元素（如按钮或某些事件侦听器）添加一个事件，以触发模式显示。

类似的东西：

$(function() {
  var modalHtml =
    ' <div class="modal-content">' +
    '   <div class="modal-body">' +
    '      <button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
    '        <span aria-hidden="true">&times;</span>' +
    '      </button>' +
    '      <strong>Oh snap!</strong> Change a few things up and try submitting again.' +
    '   </div>' + 
    ' </div>';

  // clicking on the button triggers the modal 
  $("button.btn").on('click', function() {
    // insert HTML dynamically
    $(".modal-dialog").html(modalHtml);
    // display
    $(".modal-dialog").modal('show');
  });

  // append a new element to the DOM
  $("button").after('<div class="modal-dialog modal"></div>');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary">
  Show Modal
</button>
<!-- Modal will be added here -->

【讨论】：