我试图使用模态作为弹出帮助窗口。
我把背景设置为“没有”。
当打开模态(无背景)时，无法对“原始”页面中的输入字段进行聚焦。
我把背景设置为“没有”。
当打开模态(无背景)时，无法对“原始”页面中的输入字段进行聚焦。
其他输入类型(例如复选框和按钮)工作得很好…
任何想法 ？
我的代码：
<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 …
解决方法
这听起来像一个模态不是你的问题在这里的正确解决方案。
定义的模态对话框不应该允许用户与它下面的任何东西进行交互。
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/