css - Twitter bootstrap 和 css : How to remove the modal overlay and refocus on the input box, 以便用户可以在模式打开时输入

Question

我有一个模态窗口，当用户关注搜索输入框时，它会打开。但目前当模态打开时，模态背景覆盖会阻止它。 我怎样才能将模态覆盖背景移动得更低，这样用户仍然可以在模态窗口保持打开状态时在搜索输入框中键入内容。

<form>

    <input type="email" class="form-control border-left-none" id="openmodalOnfocus" placeholder="enter text">
</form>

<div class="modal hide" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
      <div class="row">
          <div class=" col-md-4">
            lorem i[p sum on left
         </div>

          <div class=" col-md-4">
            lorem ipsom on right
         </div>
      </div>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

Answer 1

只需将此添加到您的 CSS 中:

.modal-backdrop {
    z-index: -1;
    opacity: 0 !important;
    width: 0px;
    height: 0px;
}