Twitter Bootstrap 模式阻止文本输入字段 [英] Twitter Bootstrap modal blocks text input field

问题描述

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

其他输入类型(示例中的复选框和按钮)运行良好...

有什么想法吗?

我的代码:

<div class="container"><!-- 触发模态的按钮--><表格><label>输入</label><input type="text" placeholder="Type something..."><标签类="复选框"><input type="checkbox">复选框</标签><button type="submit" class="btn">提交</button></表格><!-- 触发模态的按钮--><a href="#myModal" role="button" class="btn" data-toggle="modal">打开帮助...</a><!-- 模态--><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">模态标题</h3></div><div class="modal-body"><p>一个精致的身体……</p></div><div class="模态页脚"><button class="btn" data-dismiss="modal" aria-hidden="true">关闭</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/p>

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