1

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

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

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

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

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

感谢您的阅读。

4

3 回答 3

3

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

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

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

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

于 2013-11-18T18:35:57.187 回答
1

我相信问题出在你的Modal

从你的div中取出show课程myModal

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

至

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

表演课似乎干扰了标签。看看这个例子。

http://www.bootply.com/89609

于 2013-10-23T15:11:55.783 回答
0

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

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

这样，在您想要访问它之前，它就不会妨碍您。

于 2015-07-17T11:34:50.957 回答