JQuery/JavaScript在IE7中不工作

Question

下面的腳本沒有運行在IE7中，但它在Chrome和Firefox中運行。一旦用戶點擊更改密碼，IE中就沒有任何反應。

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 

<script type="text/javascript"> 

$(document).ready(function() { 
    $("#closebtn").click(function() { 
     $("#dlg").hide('800', "swing", function() { $("#bkg").fadeOut("500"); }); 
    }); 


    $("#opn").click(function() { 
     if (document.getElementById('bkg').style.visibility == 'hidden') { 
      document.getElementById('bkg').style.visibility = ''; 
      $("#bkg").hide(); 
     } 
     if (document.getElementById('dlg').style.visibility == 'hidden') { 
      document.getElementById('dlg').style.visibility = ''; 
      $("#dlg").hide(); 
     } 
     $("#bkg").fadeIn(500, "linear", function() { $("#dlg").show(800, "swing"); }); 
     return false; 
    }); 

}); 
</script> 


    <div id="Accountdisplay"> 
    @using (Html.BeginForm("Accountdetail", "Home", FormMethod.Get)) 
    { 

    <table align="left" cellspacing="10" cellpadding="5"> 
    <tr><td class="editor-label" > 
     User Name: 
    </td><td> 
     @Html.DisplayFor(model => model.UserName) 
     </td></tr> 
     <tr> 
    <td class="editor-label"> 
    Email Id: 
</td> 
<td> 
    @Html.DisplayFor(model => model.Email_Id) 
    </td></tr> 
    <tr> 
    <td class="editor-label"> 
    Division: 
    </td> 
    <td> 
    @Html.DisplayFor(model=>model.Division) 
</td></tr> 
<tr> 
<td class="editor-label"> 
User Type: 
</td> 
<td> 
@Html.DisplayFor(model=>model.User_Type) 
</td></tr> 
<tr><td> 

<a href="#" id="opn" rel="nofollow">Change Password</a> 

    @*<div > 
    @Html.ActionLink("[Change Password]",null,"Home",new {id="opn",style =  
    "color:white"}) 
</div>*@ 
</td></tr> 

</table> 

} 
</div> 


<div class="blockbkg" id="bkg" style="visibility: hidden;"> 
<div class="cont" id="dlg" style="visibility: hidden;"> 
    <div class="closebtn" title="Close" id="closebtn"></div> 
    @using (Html.BeginForm("Logon", "Home", FormMethod.Post)) 
    { 
    <table> 
    <tr> 
    <td> 
    @Html.LabelFor(model => model.Password) 
    </td> 
    <td>@Html.TextBoxFor(model => model.UserName, new { Style =   
    "width:65%;height:25px;font-size:1.05em" }) </td> 
    </tr> 

    <tr> 
    <td> 
    @Html.LabelFor(model => model.Confirm_Password) 
    </td> 
    <td>@Html.TextBoxFor(model => model.Confirm_Password, new { Style = "width:65%;height:25px;font-size:1.05em" }) </td> 
    </tr> 



    </table> 

    } 
</div> 
</div> 

     my css: 
      #Accountdisplay 
      { 
     background-color:Gray; 
     color:Black; 
     width:50%; 
     border:1px solid black; 
     height:80%; 
      padding: 20px; 
      margin-left:200px; 
      margin-top:10px; 
      } 
      .blockbkg { 
      background-color: black; 

      background-color: rgba(0,0,0,0.90); 
      width: 100%; 
      min-height: 100%; 
      overflow: hidden; 
    position: absolute; 
    position: fixed; 
    top: 0; 
    left: 0; 
    color: white; 
} 
.cont { 
    background-color:Green; 
    color:White; 
    font-size: 16px; 
    border: 1px solid gray; 
    padding: 20px; 
    display:block; 
    position: absolute; 
    top: 10%; 
    left: 35%; 


    width: 300px; 
    height: 300px; 

} 
.closebtn 
    { 
    width: 20px; 
    height: 20px; 
    padding: 5px; 
    margin: 2px; 
    float: right; 
    top: 0; 

    background-color:Gray; 
    display: block; 
    } 

     .closebtn:hover 
     { 
     cursor: pointer; 
      } 

這裏我也加了我的css。仍然我不能找到爲什麼它不在IE 7中工作，我應該改變IE vesrion並檢查？ 在此先感謝，

Answer 1

對不起......我可不是能添加評論...：/

哪裏jQuery的腳本標籤在什麼位置？在頭部還是在身體某處？

Answer 2

我看不出究竟是什麼問題，但是這段代碼很奇怪，應該改爲充分使用jQuery。

$("#opn").click(function() { 
    /* 
    if (document.getElementById('bkg').style.visibility == 'hidden') { 
     document.getElementById('bkg').style.visibility = ''; 
     $("#bkg").hide(); 
    } 
    if (document.getElementById('dlg').style.visibility == 'hidden') { 
     document.getElementById('dlg').style.visibility = ''; 
     $("#dlg").hide(); 
    } 
    */ 
    $("#bkg,#dlg").css("visibility", "").hide(); // does the same thing as above 

    $("#bkg").fadeIn(500, "linear", function() { $("#dlg").show(800, "swing"); }); 
    return false; 
}); 

在另一方面，除非你真的需要bgk和dlg有在頁面加載的佈局，但無形之中，你應​​該使用display:none;相反，它是什麼hide和show使用切換元素的可見性（通過fadeOut以及fadeIn）。