Question

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

我有一个网页，其中包含模态的定义和一些标签，例如：

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

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

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

感谢您的阅读。

Answer 1

你想让模态填满整个屏幕吗？我问这个是因为你省略了构成模态的两个div：模态对话框和模态内容。模态的要点是调出另一个屏幕而不必向浏览器提供另一个页面。

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

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

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

Answer 2

我认为问题出在您的Modal

上

从show div

中取出myModal课程

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

要

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

show class似乎干扰了标签。看一下这个例子。

http://www.bootply.com/89609

Answer 3

只需添加“display：none;”你的模态div风格：

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

这样就可以直到你想要访问它了。

Bootstrap模式抑制选项卡控件

3 个答案: