代码之家 › 专栏 › 技术社区 › Malmisteen Preeti

无HTML的引导警报模式[重复]

bootstrap-4 bootstrap-modal twitter-bootstrap-3 twitter-bootstrap

1

Malmisteen Preeti · 技术社区 · 8 年前

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

我希望在浏览器中发出警报,非常类似于

alert('please try again');

我想使用bootstrap,我试过了

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

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

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

2 回复 | 直到 8 年前

1

3

blurfus 8 年前

如果愿意,可以在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 -->

2

0

Lakindu Gunasekara vinod 8 年前

您可以在引导数据库中组合警报和模式。请尝试以下代码段。

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