为什么我的弹出窗口坏了？

Question

我的第一个弹出窗口按预期工作，按下该按钮可激活一个覆盖页面上其他元素的div：

然后，如果我换到另一个弹出窗口，则无效。第一种工作方式是这样做的

<input type="button" value="S&ouml;k" onClick="getElementById('popupSokNamn').style.display='';">

然后激活了包含在div中的JSP包含

<div class="popup" id="popupSokNamn" 
<% if(!showSearch) { %>
style="display: none;"
<% } %>
>
<%@ include file="WEB-INF/jspf/namnuppgifter_sok.jspf" %>
</div>

所以其他弹出窗口应该以相同的方式工作，但当然没有任何作用，因为这是HTML和CSS，其中一切都是运行时错误，无法调试：

<input type="button" value="S&ouml;k" onClick="getElementById('popupF').style.display='';">

这应该呈现另一个弹出窗口，但当然它没有，因为没有任何作用。

<div class="popup" id="popupF" 
<% if(!showSearchF) { %>
style="display: none;"
<% } %>
>
<%@ include file="includes/fullfoljd_fran_sok.jsp" %>
</div>

为什么没有效果？之前我问过这个问题并且答案说它是我的CSS但是我怀疑它是因为第一个弹出窗口正在加载这个应该是某个小错误但在某处？

页面的最后一部分是我保存弹出窗口的代码，其中只有一个有效：

<div class="popup" id="popupSokNamn" 
<% if(!showSearch) { %>
style="display: none;"
<% } %>
>
<%@ include file="WEB-INF/jspf/namnuppgifter_sok.jspf" %>
</div>
<div class="popup" id="popupSokNamn2" 
<% if(!showSearch2) { %>
style="display: none;"
<% } %>
>
<%@ include file="WEB-INF/jspf/namnuppgifter_sok2.jspf" %>
</div>
<div class="popup" id="popupD" 
<% if(!showSearchD) { %>
style="display: none;"
<% } %>
>
<%@ include file="WEB-INF/jspf/handlaggare_sok.jspf" %>
</div>

<div class="popup" id="popupI" 
<% if(!showSearchI) { %>
style="display: none;"
<% } %>
>
<%@ include file="WEB-INF/jspf/ingivningsdag_sok.jspf" %>
</div>

<div class="popup" id="popupP" 
<% if(!showSearchP) { %>
style="display: none;"
<% } %>
>
<%@ include file="WEB-INF/jspf/prioriteter_sok.jspf" %>
</div>

<div class="popup" id="popupR" 
<% if(!showSearchR) { %>
style="display: none;"
<% } %>
>
<%@ include file="WEB-INF/jspf/rabattgrundande_sok.jspf" %>
</div>

<div class="popup" id="popupF" 
<% if(!showSearchF) { %>
style="display: none;"
<% } %>
>
<%//@ include file="includes/fullfoljd_fran_sok.jsp" %>
</div>
<div class="popup" id="popupA" 
<% if(!showSearchA) { %>
style="display: none;"
<% } %>
>
<%@ include file="WEB-INF/jspf/avdelad_fran_sok.jspf" %>
</div>
<div class="popup" id="popupU" 
<% if(!showSearchU) { %>
style="display: none;"
<% } %>
>
<%@ include file="WEB-INF/jspf/utbruten_fran_sok.jspf" %>
</div>
<div class="popup" id="popupO" 
<% if(!showSearchO) { %>
style="display: none;"
<% } %>
>
<%@ include file="WEB-INF/jspf/omvandlad_ep_sok.jspf" %>
</div>
<div class="popup" id="popupEPa" 
<% if(!showSearchEPa) { %>
style="display: none;"
<% } %>
>
<%@ include file="WEB-INF/jspf/ep_avdelad_fran_sok.jspf" %>
</div>
<div class="popup" id="popupEPn" 
<% if(!showSearchEPn) { %>
style="display: none;"
<% } %>
>
<%@ include file="WEB-INF/jspf/ep_ansokningsnummer_sok.jspf" %>
</div>
</form>
<%@ include file="WEB-INF/jspf/arendeprocess_messages_inc.jspf" %>

<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
</body>
</html>

我可以在页面上看到内容实际上在那里但没有显示，只有一个弹出窗口可以设置为可见。我可以在页面发生变化并且渲染了一些垃圾的状态下获得另一个弹出窗口但是在当前状态下，当我按下另一个弹出窗口的按钮时没有任何反应。我可以将激活代码移动到另一个按钮，然后按钮会显示相同的弹出窗口，但无论我做什么，我都无法显示任何其他弹出窗口。

关于这个混乱的任何想法？

我在我的JSP的scriptlet中为不同的显示保留了布尔值：

boolean showSearch = false;
boolean showSearchD = false;
boolean showSearchP = false;
boolean showSearchI = false;
boolean showSearchR = false;
boolean showSearch2 = false;
boolean showSearchF = false; 
boolean showSearchA = false;  
boolean showSearchU = false;  
boolean showSearchO = false;
boolean showSearchEPa = false;
boolean showSearchEPn = false;

这似乎都不是问题所在。请帮我解决问题！

Answer 1

由于某种原因，您必须使用CSS并将位置设置为绝对值。然后它会工作。