twitter-bootstrap – Twitter Bootstrap模式阻止文本输入字段

发布时间：2020-12-18 00:07:57 所属栏目：安全来源：网络整理

导读：我试图使用模态作为弹出帮助窗口。我把背景设置为“没有”。当打开模态(无背景)时，无法对“原始”页面中的输入字段进行聚焦。其他输入类型(例如复选框和按钮)工作得很好… 任何想法？我的代码： div class="container"!-- Button to trigger modal --

我试图使用模态作为弹出帮助窗口。
我把背景设置为“没有”。
当打开模态(无背景)时，无法对“原始”页面中的输入字段进行聚焦。

其他输入类型(例如复选框和按钮)工作得很好…

任何想法？

我的代码：

<div class="container">
<!-- Button to trigger modal -->
  <form>
      <label>Input</label>
      <input type="text" placeholder="Type something…">
      <label class="checkbox">
        <input type="checkbox">Checkbox
      </label>
      <button type="submit" class="btn">Submit</button>
  </form>

  <!-- Button to trigger modal -->
  <a href="#myModal" role="button" class="btn" data-toggle="modal">Open Help...</a>

  <!-- Modal -->
  <div id="myModal" class="modal hide" data-backdrop="" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
      <p>One fine body…</p>
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
  </div>
</div>

简单的Javascript使弹出窗口可拖动：

$('#myModal').draggable();

所有这一切在JSFiddle …

http://jsfiddle.net/Jxdd8/3/

解决方法

这听起来像一个模态不是你的问题在这里的正确解决方案。

定义的模态对话框不应该允许用户与它下面的任何东西进行交互。

In user interface design,a modal window is a child window that
requires users to interact with it before they can return to operating
the parent application,thus preventing the workflow on the
application main window.

– 07000

话虽如此，有一种方法来绕过它。 Bootstrap sets up an event listener把焦点从其他一切，这就是阻止你编辑文本输入。其他按钮工作，因为他们不需要焦点，只有一个点击事件。

您可以监听引导模式触发器的“shown”事件，并禁用其设置的焦点侦听器。

$('#myModal').on('shown',function() {
    $(document).off('focusin.modal');
});

只是为了好玩：http://jsfiddle.net/Jxdd8/4/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!