Rails 4 模态窗口（弹出窗口）：如何防止在选择下拉项目时靠近答案

【问题标题】：Rails 4 Modal Window (Pop Up Window) : How to Prevent from getting close on selecting a drop down ItemRails 4 模态窗口（弹出窗口）：如何防止在选择下拉项目时靠近
【发布时间】：2015-09-12 06:39:25
【问题描述】：

我在我的 rails 4 应用程序中启用了一个模式（弹出窗口），并有一个下拉列表可供选择。我面临的问题是，如果我点击下拉列表并选择一个选项，它会自动关闭，但我需要将值保留在那里，我仍然点击关闭按钮或保存按钮。

我的模态代码如下：_doctorselect.html.erb

 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

<h4>Add Referral to Doctors </h4>
</div>
  <div class="modal-body">

        <!-- Single button -->
          <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Please Assign Referral <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
              <!-- <li>Please Assign Referral</a></li> -->
              <% @practices.each do |practice| %>
                <!-- <li><a href="customers?practitionerid=<%= practice.user_id %>&type=<%= @type %> "><b>Dr.<%= practice.firstname %></b></a></li> -->
                <li><a href=""><b>Dr.<%= practice.firstname %></b></a></li>
              <% end %>
            </ul>
          </div>

    </div>

  <div class="modal-footer">
      <button class="btn btn-primary">Submit</button>
      <button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Cancel</button>
  </div>

而Js文件为：doctorlist.js.erb

$("#modal-window").html("<%= escape_javascript(render :partial => 'doctorselect') %>");
$("#modal-window").modal()

【问题讨论】：

标签： javascript jquery ruby-on-rails twitter-bootstrap

【解决方案1】：

您的问题可能与“在模式窗口外单击”有关。

见引导documentation for modal:

backdrop 包括一个模态背景元素。或者，将static 指定为在点击时不会关闭模式的背景。

所以你应该像这样打开你的模式：

$("#modal-window").modal({ backdrop: 'static' })

或在启动此对话框的按钮/链接的data-backdrop 属性中指定它。现在，您的模式不应通过单击窗口外部来关闭。

【讨论】：

我的问题是单击下拉列表项，而不是在单击窗口外时。
{ backdrop: 'static' } 不是为你工作的吗？我认为它们应该是相关的。
您是否尝试摆脱下拉项目中的链接？目前，您在下拉列表的每个列表项中都有一个带有href="" 的a 标记。这可能会导致浏览器在您每次单击某个项目时尝试导航离开。只是猜测。

【解决方案2】：

最后，在我的视图代码和 .js 文件中进行了一些修改的波纹管代码对我有用：

_doctorselect.html.erb

<%= form_tag (assignreffaral_practices_path), id: "myform", method: 'get', remote: true  do |f| %>
<div class="modal-dialog ">
  <div class="modal-content modal-md">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h4 class=" glyphicon glyphicon-pencil"> Add/Edit/Remove Referral to: Dr.<%= @Practitioner_name %></h4>
    </div>
      <div class="modal-body">
              <div class="btn-group">
                  <table class="table ld-margin-top-20">
                    <thead>
                    <tr>                          
                        <td>
                            <!-- Single button -->
                            <%= collection_select(:customer, :id, @practices, :id, :full_name, {:prompt => 'Remove Referral' }, :class =>"form-control") %>
                        </td>

                        <td>

                          <button type="submit" onclick="window.location = '/practices'" class="btn btn-success">Submit</button>

                        </td>

                        <td>
                            <button class="btn btn-danger" id="doctor" data-dismiss="modal" aria-hidden="true">Cancel</button>
                        </td>

                    </tr>
                    </thead>
                </table>
              </div>
        </div>  
     </div>
  </div>
<% end %>

doctorselect.js.erb

$("#modal-window").html("<%= escape_javascript(render :partial => 'doctorselect') %>");
$("#modal-window").modal()

【讨论】：