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

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 中为不同的显示保留了 bool 值:

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 并将位置设置为绝对位置。然后它会起作用。