Rails Bootstrap 模态没有出现

Question

我在我的页面中包含了 Bootstrap 模式。但是当我按下按钮并且没有弹出对话框出现时，我的页面变灰了。但是，当我按下 ESC 按钮时，对话框会在退出前闪烁一次。我尝试的另一个例子是，我将 //= bootstrap/modal 包含在我的 application.js 文件中。在这个文件中，我还有行 //= 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.On调用模态，代码为

    <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 模态没有出现

Rails Bootstrap Modal not appearing

ruby-on-rails

twitter-bootstrap

bootstrap-modal