-4

如何使用 jquery 打开 div 以登录/注册我的 Web 应用程序。我可以通过更改 div 的可见属性来显示 div。但同时我想禁用整个页面。必须显示整个页面，但文本、按钮或任何元素等元素都不起作用。

<div id="header">
    <div id="navigation">
        <a href="#">Menu1</a><a href="#">Menu2</a><a href="#">Sign Up / Sign In</a><a href="#">About</a>
    </div>
</div>
<div id="content">
    <div id = "dbox" style="visibility:hidden">
        <div id="register"  style="visibility:visible>
            <form .............</from>
        </div>
        <div id="login"  style="visibility:hidden>
            <form .............</from>
        </div>
        <div id="forgotpassword"  style="visibility:hidden>
            <form .............</from>
        </div>
   </div>
   <div id="blog-content">
        <div> Page content </div>
   </div>

4

3 回答 3

1

创建一个模态表单，

或者干脆

将您的表单置于 jquery 模式中，

登录示例，

$(function() {
    $( "#login" ).dialog({
      modal: true,
      autoOpen: false,
      buttons: {
        Ok: function() {
          $( this ).dialog( "close" );
        }
        Submit: function(){
          $(this).find('form').submit();
        }
      }
    });
  });
于 2013-09-05T05:52:17.943 回答
0

使用标准 UI 元素 - “模态”机制中的JQuery UI 对话框。

于 2013-09-05T05:47:31.683 回答
0

你可以使用这样的 div，把它放在 body 之后。确保所有 html 元素的 z-index 都不大于 998

<div id="fade" style="position:fixed;width:100%;height:100%;background-color:#ffffff;opacity:.7;z-index:999;display:none;"></div>

然后在它上面显示你的盒子；

<div id="yourBox" style="position:absolute;z-index:1000">

<1-- this is your popup box-->

</div>

在任何按钮单击或任何事件上调用此函数

function disable()
{
  var ele = document.getElementById('fade');
 ele.style.display = "block";
 ele.style.display = "yourBox";

}
于 2013-09-05T05:56:04.307 回答