Bootstrap模态重叠

时间:2013-04-01 04:27:48

标签: javascript html5 css3 twitter-bootstrap

我已经实现了bootstrap模式,它工作正常。这是我的代码

<div id="myModal" class="modal fade hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header" style="background-color:#bb4837">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
        <h2 style="color:white;vertical-align:middle"id="myModalLabel">Add Multiple Stores</h2>
    </div>
    <div class="modal-body">
        <des style="font-family:garrisons">You can upload a excel sheet with your store details.Please download the multistore template in .xls format <a href="#">here</a>.</des><br><br>
            <input style="margin-left:5em" type="text" id="upload-textstore" onclick="select_file('store','storefile','store','text/csv');" class="span3"/><button type="button" style="margin-bottom:25px;margin-left:10px" onclick="upload('/merchant/v1/fileupload','store')" class="btn btn-upload">Upload</button><br>
        <br><br><br><br>
    </div>
    <div class="modal-footer">
            <form class="form-inline" style="margin-bottom:0px">
                <button class="btn btn-danger " data-dismiss="modal" style="font-size:1.2em;height:32px;width:7em;margin-left:4em;margin-right:.5em" href="#">Select</button>
                <a data-dismiss="modal" href="#" style="font-size:1.2em;margin-top:.4em;margin-left:0px;margin-right:1em">Cancel</a>

            </form>
    </div>
</div>

问题是它与网页中的其他组件重叠,看起来是隐藏的。

2 个答案:

答案 0 :(得分:6)

以防万一它会帮助其他人,我遇到了问题,这是因为我没有在明确定义的行类中使用我的引导列。

答案 1 :(得分:5)

我在评论中回答了这个问题,但在这里我的正式答案,如果某些内容被假设隐藏在网站上但它仍然存在,你应该看看那些元素CSS显示属性并确保它们被设置到display:none这将从页面流中删除该元素,如果该元素的属性visibility: hidden更改为display:none,则visibility: hidden会删除元素的可视方面但不会将其从网站流中删除。