0

下面的脚本不在 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 版本并检查吗？？？？提前致谢，

4

2 回答 2

0

抱歉...我无法添加评论...：/

jquery-script-tag 位于哪里？在头内还是在身体某处？

于 2013-03-19T07:01:56.237 回答
0

我看不出究竟是什么问题，但是这段代码很奇怪，应该更改为完全使用 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和也是）。showfadeOutfadeIn

于 2013-03-19T07:13:06.100 回答