Home >Web Front-end >HTML Tutorial >问一个关于做Bootstrap的弹出对话框遇到的问题_html/css_WEB-ITnose
Bootstrap Web 对话框
写的一个Web搜索程序,用Bootstrap写了一个弹出对话框,在首页上弹出该对话框时,是bootstrap默认的黑底白框,但是在搜索结果页面点击时,整个页面都变成黑底的了,请问这是怎么回事儿呢,我两个页面中引用的JS和CSS文件都一样的,而且,弹出对话框都是引用的一个jsp文件。请问该怎么办呢?两个页面中弹出对话框效果如下:<form name="form2" action="GetCategory.action" method="get" id="search" class="form-inline"> <a style=" vertical-align:middle; margin-top:35px;margin-left:10px;display:inline-block;"><img src="images/logo.png" alt="" /></a> <input type="hidden" name="page" value="1"/> <input style="max-width:90%" type="text" name="key" value="<%=key %>" class="span5 ui-autocomplete-input" id="key" placeholder="输入关键词进行查询..."/> <input style="margin-top:50px;" type="submit" class="btn btn-primary" value="企业检索" /> <input style="margin-top: 50px" type="submit" class="btn" value="高级检索" data-toggle="modal" data-target="#myModal" href="search.jsp"/> </form> <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <form action="GetCategory.action"> <div class="modal-header"> <button class="close" type="button" data-dismiss="modal">×</button> <h3 id="myModalLabel">高级检索</h3> </div> <div class="modal-body"> <select name="category" id="bc_id"> <option value="">--选择行业--</option> </select> <select name="province" id="lc_id"> <option value="">--选择地区--</option> </select> <input type="text" id="key" name="key" class="span5" placeholder="输入关键词进行查询..."/> <br/> </div> </form> </div>
像是z-index出了问题。
你用chrome或者firebug看一下,弹窗的z-index是不是1050?bootstrap的弹出框示例那里class为model的样式设置了z-index为1050。
黑色背景的class是modal-backdrop,z-index是1040。
两个都没问题才能正确显示弹出框。
样式问题,如楼上说的应该是z-index的层次问题导致的
建议你可以在弹出框的就近的位置加个z-index:100000;的内联样式试下