>  기사  >  웹 프론트엔드  >  问一个关于做Bootstrap的弹出对话框遇到的问题_html/css_WEB-ITnose

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

WBOY
WBOY원래의
2016-06-21 09:44:461154검색

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.