Twitter Bootstrap模态块文本输入字段 [英] Twitter Bootstrap modal blocks text input field

问题描述

我正在尝试使用模式作为弹出帮助窗口. 我将背景设置为无". 当模式打开(无背景)时，原始"页面中的输入字段将无法聚焦.

其他输入类型(例如复选框和按钮)效果很好...

有什么主意吗?

我的代码:

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

解决方案

听起来模态不是这里解决您问题的正确方法.

根据定义，模态对话框不应允许用户与其下方的任何内容进行交互.

在用户界面设计中，模式窗口是一个子窗口， 要求用户与其进行交互，然后才能恢复操作 父应用程序，从而阻止了 应用程序主窗口.

- http://en.wikipedia.org/wiki/Modal_window

话虽这么说，有一种方法可以解决它. Bootstrap 设置事件侦听器以窃取焦点一切，这就是阻止您编辑文本输入的原因.其他按钮之所以起作用，是因为它们不需要焦点，只需单击事件即可.

您可以侦听引导程序模式触发的显示"事件，并禁用它设置的焦点侦听器.

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

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

I am trying to use a modal as a popup help window. I set backdrop to 'nothing'. When the modal is opened (without backdrop) input fields in 'original' page cannot be focused.

Other input types (checkbox and button in example) work well...

Any idea ?

My code:

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

Simple Javascript to make the popup draggable:

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

All this on JSFiddle...

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

解决方案

It sounds like a modal isn't the right solution to your problem here.

A modal dialog by definition shouldn't allow the user to interact with anything below it.

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.

- http://en.wikipedia.org/wiki/Modal_window

That being said, there is a way to get around it. Bootstrap sets up an event listener to steal focus from everything else, and that's what's stopping you from editing the text input. The other buttons work because they don't require focus, only a click event.

You can listen for the 'shown' event that the bootstrap modal triggers, and disable the focus listener it sets.

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

And just for fun: http://jsfiddle.net/Jxdd8/4/

这篇关于Twitter Bootstrap模态块文本输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！