问一个关于做Bootstrap的弹出对话框遇到的问题

[weixinyaojinNUS]

写的一个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="margin-top:50px;" 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。 两个都没问题才能正确显示弹出框。

[fjufo]

样式问题，如楼上说的应该是z-index的层次问题导致的 建议你可以在弹出框的就近的位置加个z-index:100000;的内联样式试下

[倾城笑颜]

我也是，弄弹出的效果就是全灰或则出现的样式很乱，不知道怎么设，楼主弄好了吗

[wangjun5159]

我也遇到了这个问题，正如二楼所说，是z-index问题引起的。模态的z-index是1050，而div的z-index是1040，1050>1040，所以导致模态的涂层跑到div的前边来了。 我的问题产生的原因是，div所在的外层div设置了z-index:20,删除后，就正常了，更深层次的原理，还在研究中。

[feellikeapple]

遮罩层其实覆盖了整个可见区，也就是modal的父级是body，建议把整个模态框放在body的子层。

[iceqijunfei]

我遇到过这种问题，你先让第一个模态框消失： $("#elementProperty").modal('hide'); 再让第二个模态框出现： $("#protectionProperty").modal("show");

[一场小醉]

遇到同样问题，按照4楼的方法解决了