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-script-tag位于何处？在头部或身体的某个部位？

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

JQuery / JavaScript无法在IE7中运行

2 个答案: