Почему мое всплывающее окно сломалось?

Question

Мои первые Всплывающие работы, как и ожидалось, нажатие кнопки активирует DIV, который укладывает над другими элементами на странице:

Тогда, если я меняю на другой всплывающее окно ничего не работает. Первый способ, который работал было сделано как этот

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

Тогда что активировал JSP включают то, что находится в DIV

<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 для различных дисплеев:

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 и установить позицию по абсолютной причине по какой-либо причине. Тогда это сработает.