Javascript 引导模式块选择元素_Javascript_Jquery_Html_Css_Twitter Bootstrap

Javascript 引导模式块选择元素

javascript jquery html css twitter-bootstrap

Javascript 引导模式块选择元素,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,当模式出现时，有一个选择列表锚定在页面的左上角。最终，该列表将用于提供导航选项；但是，我无法在列表中选择一个选项。我试图将z指数设置为高于模式，但似乎没有任何效果。希望有人能提供一些解决方案？谢谢 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Tool</title>  &l

当模式出现时，有一个选择列表锚定在页面的左上角。最终，该列表将用于提供导航选项；但是，我无法在列表中选择一个选项。我试图将z指数设置为高于模式，但似乎没有任何效果。希望有人能提供一些解决方案？谢谢

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tool</title>
<!-- Bootstrap v2.3.2 -->
<link href="css/bootstrap.css" rel="stylesheet" />
</head>
<body>
<button type="button" class="onl btn btn-success btn_online">Submit</button>

<!-- popup message -->
<div id="popup_message" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 class="_c1g">Description</h3>
</div>

<div class="well msg" id="msg" style="max-height:400px;overflow:auto;"></div>

<div class="modal-footer">
    <button class="btn _c1e" data-dismiss="modal" aria-hidden="true">Close</button>
</div>


工具
提交
×
描述
接近


$（文档）.ready（函数（）{
$（文档）.on（'click'，'btn_online'，函数（e）{
$（'popup#u message'）.modal（'show'）；
$（“正文”）.append（“选择…第1页第2页”）
});
});

我的假设是正确的。模态强制聚焦于自身。以上是@SmartLove创建的解决方案。基本上，将以下内容放在引导脚本之后

$.fn.modal.Constructor.prototype.enforceFocus=function（）{}

现在选择元素按预期工作！呜呜

要解决关闭时模式阻止其下所有元素的问题，还可以添加以下块：

<style>
  /*Modal blocking caused issues with selecting objects*/
  .modal { display:none; }
</style>


/*模态阻塞导致选择对象时出现问题*/
.modal{显示：无；}

对我来说似乎很好@sineteta在你的小提琴中没有显示对话框。我正在使用（不是3.0），然后尝试一下。这些选项不可选择。当然，它在2.3.2中仍然有效，但您使用的浏览器是什么？到底是什么问题呢？Firefox24，IE10，没关系，我无法选择一个选项。我有一个脚本托管在我的网站上的客户端。选择列表是在其站点上运行的仪表板。如果他们加载引导模式，我仍然需要让用户访问仪表板。希望能有帮助。对不起，我已经挖了一个小时了，不知道为什么那些浏览器很烂。我可以确认，

不会在FF中运行，尽管它会注册点击事件。非常蹩脚。

<style>
  /*Modal blocking caused issues with selecting objects*/
  .modal { display:none; }
</style>