Question

一个非常简单的问题，但令人惊讶的是，无法找到答案。

我希望在浏览器中提醒某些内容，与

非常相似

alert('please try again');

我想使用bootstrap，我试过这个

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

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

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

Answer 1

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

创建它之后，您需要将一个事件添加到现有元素（如按钮或某个事件监听器），这将触发模式显示。

有些事情：

＆＃13;

$(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>');
});

＆＃13;

<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 -->

＆＃13;

Answer 2

您可以在引导程序中组合警报和模态。请尝试以下代码段。

步骤1 - 包含bootstrap cdn或下载文件并将其插入到html中 https://getbootstrap.com/docs/4.0/getting-started/introduction/

步骤2 - 参考bootstrap模态和警报 https://getbootstrap.com/docs/4.0/components/modal/ https://v4-alpha.getbootstrap.com/components/alerts/

假设您在此方案中使用了bootstrap 4.

＆＃13;

<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>

＆＃13;

没有HTML的Bootstrap警报模式

2 个答案: