Home  >  Article  >  Web Front-end  >  问一个关于做Bootstrap的弹出对话框遇到的问题_html/css_WEB-ITnose

问一个关于做Bootstrap的弹出对话框遇到的问题_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 09:44:461157browse

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">&times;</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;的内联样式试下

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn