Rails Bootstrap Modal没有出现

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.在调用模态时,代码是

    <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>