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

К сожалению ... i'm не в состоянии добавить комментарий ...:/

Где 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 использовать для переключения visiblity такой элемент в (через fadeOut и fadeIn).