Question

我正在尝试在rails app中加载我的节目页面时启动一个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;
}

这在以前工作但在格式化我的电脑并在导轨上安装了新鲜的红宝石时停止工作。

我的应用程序中的页面模态中有许多其他正常工作正常。

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>

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

页面加载时Bootstrap模式无效

1 个答案: