引导按钮不能调用模态答案

【问题标题】：Bootstrap button can't call a modal引导按钮不能调用模态
【发布时间】：2016-08-22 20:02:52
【问题描述】：

我在我的 html 代码中插入了一个模式，并创建了一个引导按钮（因为我使用的是引导）来调用模式。问题是当我点击按钮时我的模型没有出现。这是我的代码：

<!-- Modal -->
<div id="ordine" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Ordine inviato!</h4>
      </div>
      <div class="modal-body">
        <p>I vostri ordini saranno evasi in ordine cronologico di arrivo. Riceverete, una volta che abbiamo controllato la disponibilità fisica in magazzino, una mail di conferma e, successivamente, una seconda mail di avviso della partenza del pacco.</p>
        <p>Grazie per aver scelto Mailmodel !</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

这是我的按钮：

<div class="row">
  <div class="col-md-2"></div>
  <div class="col-md-8">
    <div class="address">
      <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#ordine">Invia ordine</button>
    </div>
  </div>
  <div class="col-md-2"></div>
</div>

我在我的代码中做错了吗？有人可以帮我解决这个问题吗？

【问题讨论】：

你必须忘记添加 jQuery Library 或 JS/jQ 的 Bootstrap 库文件，因为你的 Dom 是根据文档。

标签： html css twitter-bootstrap modal-dialog

【解决方案1】：

您需要将其包含在您的 head 部分中：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

让您的代码正常工作。

【讨论】：