Question

我在页面中包含了Bootstrap模式。但是当我按下按钮时，我的页面会变灰，没有出现弹出对话框。但是，当我按下ESC按钮时，对话框会在退出前闪烁一次。我尝试的另一个实例是，我在我的application.js文件中包含了//= bootstrap/modal。在这个文件里面我也有一行//= bootstrap。当我同时包含这一行时，按下按钮时，模态仅停留不到1秒。

以下是我的观看页面的代码，

<% provide(:title, "Log in") %>
<div class="center jumbotron">
<h1> Kaching </h1>
<div class = "row" >
  <div class="col-md-6 col-md-offset-3">
    <%= form_for(:session, url: login_path) do |f| %>

    <%= f.label :logID, "Log ID" %>
    <%= f.text_field :logID %>

    <%= f.label :password %>
    <%= f.password_field :password, class: 'form-control' %>

    <%= f.submit "Log In", class:"btn btn-primary" %>
    <% end %>
  </div>
</div>
</div>
<div class="container">
  <h2>Small Modal</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Small Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>This is a small modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

由于

Answer 1

您的代码似乎没有问题。为了清楚起见，我将解释有关模态实现的所有步骤。

步骤 1.在你的JavaScript中包含bootstrap.js，并检查是否只有bootstrap.js或bootstrap.min;两者都不应该出现。

2.Modal调用步骤应

<button type="button" class="btn btn-primary success" data-toggle="modal" data-target="#myModal">Login
 </button>

3.在调用模态时，代码为

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Please Login</h4>
      </div>
      <div class="modal-body">
        <div class="col-xs-8">
          <input type="text" class="form-control" placeholder="user name">
          <input type="password" class="form-control" placeholder="password">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default"data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary info">Login</button>
      </div>
    </div>
  </div>
</div>

Rails Bootstrap Modal没有出现

1 个答案: