html - 为什么我的弹出窗口不显示？

Question

我在同一页面上有另一个使用此技术的弹出窗口，因此它应该可以工作，并且在我确实破坏了渲染的一些更新后它曾经工作过。它曾经有效，但现在我有一个 HTML 回归错误，其中更新 b0rked 旧 View ，所以现在我的弹出窗口不显示。我有许多应该激活弹出窗口的按钮:

按搜索然后激活此代码

<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>

反过来，这个 JSPF 片段应该呈现在这个页面的顶部，但什么也没有出现。

<table width="100%" border="0" cellspacing="0" cellpadding="2" align="center" class="TB_nb">
  <tr>
  <td colspan="3" class="pusher TB_nb"><h2>Sök person/företag</h2> 
</td>
  <td><a href="javascript:void(0)" onclick="document.getElementById('popupSokNamn').style.display = 'none';" >X</a></td>
</tr>
</table>
<br><br>
<h2 class="pusher">Sök person/företag</h2>
<div id="Vsok">

<div style="text-align: right; width: 100%; padding-right: 5%; padding-top: 5px;">
<span onClick="getElementById('sokF').style.display='', getElementById('bottomA').style.display='none', getElementById('bottomV').style.display='', getElementById('Vsok').style.display='none'" class="link_sm">Visa s&ouml;kformul&auml;r</span>
</div>

</div>

<div id="sokF">

<div style="text-align: right; width: 100%; padding-right: 5%; padding-top: 5px;; padding-bottom: 5px;">
<span onClick="getElementById('sokF').style.display='none', getElementById('bottomA').style.display='none', getElementById('bottomV').style.display='', getElementById('Vsok').style.display=''" class="link_sm">D&ouml;lj s&ouml;kformul&auml;r</span>
</div>

<div style="width: 100%; margin-left: 15px; margin-right: 80px;" class="fontS80">
<fieldset style="border: 1px solid Grey; display:inline;"><legend class="small">Fysisk</legend> 
<div class="fl30">&nbsp;F&ouml;rnamn:</div>
<div class="fl50"><input type="text" size="60" name="<%= PandoraFieldConstants.FIELD_SEARCH_FORNAMN %>" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
<div class="clear"></div>
<div class="fl30">&nbsp;Efternamn:</div>
<div class="fl50"><input type="text" size="60" name="<%= PandoraFieldConstants.FIELD_SEARCH_EFTERNAMN %>" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
</fieldset>

<fieldset style="border: 1px solid Grey; display:inline;"><legend class="small">Juridisk</legend> 
<div class="fl30">&nbsp;F&ouml;retag:</div>
<div class="fl50"><input type="text" size="60" name="<%= PandoraFieldConstants.FIELD_SEARCH_FORETAG %>" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
<div class="clear"></div>
<div class="fl30">&nbsp;Organisationsnummer:</div>
<div class="fl50"><input type="text" size="60" name="<%= PandoraFieldConstants.FIELD_SEARCH_ORGNUMMER %>" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
</fieldset> <br><br>

<!-- <div class="fl30">Attention, c/o etc.:</div>
<div class="fl50"><input type="text" size="60"></div>
<div class="clear"></div>

<div class="fl30">Postadress:</div>
<div class="fl50"><input type="text" size="60"></div>
<div class="clear"></div>

<div class="fl30">Postnummer:</div>
<div class="fl50"><input type="text" size="30"></div>
<div class="clear"></div> -->

<div class="fl30">Postort:</div>
<div class="fl50"><input type="text" size="40" name="<%= PandoraFieldConstants.FIELD_SEARCH_POSTORT %>" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
<div class="clear"></div>

<div class="fl30">Land:</div>
<div class="fl50"><input type="text" size="2" name="<%= PandoraFieldConstants.FIELD_SEARCH_LANDKOD %>" onkeyup="doSubmitByEnter('Namnsokning', 'search')">&nbsp;
                    <select name="<%= PandoraFieldConstants.FIELD_SEARCH_LAND %>" onkeyup="doSubmitByEnter('Namnsokning', 'search')">
                        <option value="1" SELECTED></option>
                        <option value="2"></option>
                        <option value="3"></option>
                        <option value="4"></option>
                        <option value="5">---------------------------------</option>
</select></div>
<div class="clear"></div>

<!-- <div class="fl30">Region:</div>
<div class="fl20"><select name="">
                        <option value="1" SELECTED></option>
                        <option value="2"></option>
                        <option value="3"></option>
                        <option value="4"></option>
                        <option value="5">-----------------------------------------------</option>
</select></div>
<div class="clear"></div>
<div class="fl30">Tel:</div>
<div class="fl50"><input type="text" size="40"></div>
<div class="clear"></div>

<div class="fl30">Fax:</div>
<div class="fl50"><input type="text" size="40"></div>
<div class="clear"></div>

<div class="fl30">E-post:</div>
<div class="fl50"><input type="text" size="60"></div>
<div class="clear"></div>
 -->
<div class="fl50">&nbsp;</div>
<div class="fl5"><input type="button" value="Rensa"></div>
<div class="fl10"><input type="button" value="  S&ouml;k  " onclick="javascript:doSubmit('Namnsokning', 'search')"></div>
<div class="clear">&nbsp;</div>
<div class="clear">&nbsp;</div>
</div>

</div>

<table width="100%" border="0" cellspacing="0" cellpadding="4" align="center">
<tr>    
    <td><h3>Sökresultat:</h3></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr>    
    <td colspan="4">En massa text <span class="link">Hj&auml;lp!</span> </td>
</tr>
<tr>    
    <td><input type="button" value="Visa alla"></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr class="smallb">
    <td>Antal &auml;renden: 527</td>
    <td>&nbsp;</td>
    <td>Visa &auml;renden: &#60;&#60; 1-200 201-400 401-527 &#62;&#62; </td>
<td>&nbsp;</td>
</tr>
</table>

<table width="100%" cellspacing="0" align="center" class="sortable" id="unique_id">
<tr>
    <th class="thkant">F&ouml;rnamn</th>
    <th class="thkant">Efternamn</th>
    <th class="thkant">Adress</th>
    <th class="thkant">Postnr</th>
    <th class="thkant">Postort</th>
    <th class="thkant">Region</th>
    <th class="thkant">Land</th>
    <th class="thkant">Telefonnummer</th>
</tr>

<%
    for(int i=0; i<apc.getSessionData().getNamnsokningLista().size(); i++) {

        PersonInfo person = (PersonInfo)apc.getSessionData().getNamnsokningLista().get(i);
        if(i%2==0) {
%>
<tr class="g1" onmouseover="javascript:setStoreStyle(this)"; onmouseout="javascript:getStoreStyle(this)" onclick="javascript:doSubmitWithModifierAndIndex('Grunduppgifter','editSearchPerson', '', '<%= person.getPersonId() %>')" style="cursor:pointer;">
<%
        } else {
%>
<tr class="g2"onmouseover="javascript:setStoreStyle(this)"; onmouseout="javascript:getStoreStyle(this)" onclick="javascript:doSubmitWithModifierAndIndex('Grunduppgifter','editSearchPerson', '', '<%= person.getPersonId() %>')" style="cursor:pointer;">
<%
        } 
%>
    <td><%= person.getFornamn() %></td>
    <td><%= person.getEfternamn() %></td>
    <td><%= person.getPostadress() %></td>
    <td><%= person.getPostnr() %></td>
    <td><%= person.getPostort() %></td>
    <td>&nbsp;</td>
    <td><%= person.getLandKod() %></td>
    <td><%= person.getTelefon() %></td> 
</tr>
<%
}
%>
</table>


<div id="bottomV">
<table width="100%" align="center">
<tr>
<td align="left"><input type="button" id="visaknapp" value="Visa" disabled style="width:150px;" onClick="getElementById('sokR').style.display='', getElementById('bottomA').style.display='', getElementById('bottomV').style.display='none', getElementById('Vsok').style.display='', getElementById('sokF').style.display='none'"></td>
<td align="right"><input type="button" value="Avbryt" style="width:150px;" class="checkmargin"><input type="button" value="Infoga" disabled style="width:150px;"></td>
</tr>
</table>
</div>

<div id="bottomA" style="display: none">
<table width="100%" align="center">
<tr>
<td align="left"><input type="button" value="&Auml;ndra i register" style="width:150px;"></td>
<td align="right"><input type="button" value="Avbryt" style="width:150px;" class="checkmargin"><input type="button" value="Infoga" style="width:150px;"></td>
</tr>
</table>

但什么也没有出现。我怀疑一些格式错误的 DIV 或其他 HTML 错误。使用 W3C 检查了所有输出，发现有一些错误，但所有 DIV 都已关闭，并且我没有看到其他相关的 HTML 错误。您认为我的弹出窗口不显示的原因是什么？你能帮我修一下吗？

谢谢

更新

完整的 HTMl 源代码粘贴在这里 http://pastebin.com/uEafLVBd

Answer 1

尝试

document.getElementById('popupF').style.display='block'

代替 getElementById('popupF').style.display=''

http://jsfiddle.net/j5mUj/5/