引导模式抑制选项卡控件答案

【问题标题】：Bootstrap modal inhibiting tab controls引导模式抑制选项卡控件
【发布时间】：2015-07-17 19:34:50
【问题描述】：

我正在尝试创建一些引导模式，但我遇到了问题。

我有一个包含模式定义和一些选项卡的网页，例如：

<div id="myModal" class="modal show fade">
   <div class="modal-header">
        <h3>My Modal</h3>
   </div>
   <div class="modal-body">
       <form class="form-horizontal">

            <div class="control-group">
                 <label class="control-label">Field</label>
                 <div class="controls">
                    <input id="my-field" class="" type="text" disabled="">
                 </div>
            </div>

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

<div class="tabbable custom-tab"> 
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">Tab1</a></li>
        <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
        <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tab1">
                ........
        </div>

        etc...
    </div>
 <div>

当被激活时，模式会覆盖选项卡控件。如果没有模态的定义，选项卡可以正常工作，但是有了定义，我无法单击选项卡（或至少其中一些），即光标不会变为小手以允许我单击它们。就好像即使模式被隐藏，它也覆盖了选项卡。但是，在激活模式然后关闭它之后，我可以正常单击选项卡。

关于发生了什么的任何想法？

感谢您的阅读。

【问题讨论】：

你能用小提琴或使用bootply.com来演示这个问题吗？
谢谢，有点新手引导所以不熟悉这些选项。认为提取相关代码可能有点涉及。我会看看我能做什么。
别担心，我想我知道出了什么问题。
谢谢，非常感谢任何帮助。
只是想引起您的注意，我注意到您现在已经提出了 9 个问题，并且没有接受任何问题的答案。我会鼓励您检查过去的问题并接受和/或投票对您有用的答案。这将帮助他们，也帮助你，因为如果你不接受你的问题的答案，用户将来可能不太愿意回答你的问题。

标签： html twitter-bootstrap modal-dialog

【解决方案1】：

你想让模态填满整个屏幕吗？我问这个是因为你省略了构成模态的两个 div：modal-dialog 和 modal-content。模式的重点是打开另一个屏幕，而不必为浏览器提供另一个页面。

我在http://www.bootply.com/94913这里添加了两个缺失的div，所以你可以看到与这个版本http://www.bootply.com/89609的区别。

您无法单击选项卡的原因是模式在开始时被调用，而不是通过按钮或链接。由于您省略了上面提到的两个 div，这会导致模式填满屏幕并且不允许访问底层页面。此外，由于模式填满了屏幕，您不能简单地单击它来关闭模式并继续。那时您唯一的选择是单击关闭按钮。

此外，不建议使用 1000 像素模式，因为它会导致浏览器窗口在大多数查看平台上滚动。除非这被设计为全屏桌面应用程序，否则请相应地规划您的模态。我使用的一般经验法则是，如果模式占据现有网站的四分之一以上，它可能应该拥有自己的页面，或者应该合并到另一个部分。当您引入滚动和模式时，您必须考虑点击关闭并将模式背景设置为静态或其他一些自定义处理。

【讨论】：

【解决方案2】：

我认为问题出在您的Modal

从myModal div 中取出show 类

<div id="myModal" class="modal show fade">

到

<div id="myModal" class="modal fade">

显示类似乎干扰了选项卡。看看这个例子。

http://www.bootply.com/89609

【讨论】：

抱歉没有解决。模式不显示以它被激活开始
data-toggle="modal" data-target="#myModal" 当我单击最初处于活动状态的选项卡中显示的表格行时。就在那时，我无法单击其他选项卡。模式关闭后，我可以单击这些选项卡。
我不确定我是否理解.. 模态显示的唯一原因是因为我通过 jQuery 调用了它。看看这个例子bootply.com/89612这不是你要找的吗？
嗯，是的，差不多就是这样。不知道为什么它对我的不起作用。
@PaulN 看看我最新的例子bootply.com/89612 你会看到你可以马上点击标签。

【解决方案3】：

只需添加“显示：无；”到您的模态 div 样式：

<div id="myModal" class="modal show fade" style="display:none;">

这样在你想访问它之前它是不碍事的。

【讨论】：