jquery - 页面加载时的 Bootstrap 模式不起作用

Question

我正在尝试在 Rails 应用程序中加载我的显示页面时启动 Bootstrap 模式，我尝试的是:

show.html.erb

<div class='center'>
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-image">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Confirm Your Shipment!</h4>
            </div>
            <p id="notice"><%= notice %></p>
            <div class="modal-body">
<p>
<h4>
  <strong>PickUp Location:</strong>
</h4>
<h5>
  <strong><%= @load.pickup %></strong>
</h5>

<h4>
  <strong>Delivery Location:</strong>
</h4>
<h5>
  <strong><%= @load.delivery %></strong>
</h5>

<p>
    <div class="modal-footer">
    <a href="/shipments" class="btn btn-primary">Confirm</a>
    <a href='edit_load_path' class="btn">Edit</a>
  </div>
        </div>
      </div>
    </div>

javascript

<script type="text/javascript">
  $(document).ready(function(){
    $("#myModal").modal('show');
  });
</script>

CSS

.modal-header {
    padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color: #87CEEB;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
 }


.modal-dialog {
  padding-top: 15%;
}

.modal-image{
    background-image: url('/assets/sure.jpg');
    background-repeat:no-repeat;
    background-size:cover;
}

这之前可以工作，但在格式化我的电脑并在 Rails 上安装新的 ruby​​ 时停止工作。

我的应用程序中还有许多其他正常的页面模式，它们运行良好。

Answer 1

我刚刚将本文中的所有代码粘贴到我的文件中并且它起作用了。请确保您已导入 Bootstrap Javascript 文件和 jQuery 文件。

如果没有，只需将其添加到您的 html body 标记的末尾:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>

请告诉我这是否对您有帮助:)