Question

如何使用jquery为我的Web应用程序登录/注册打开div。我能够通过改变div的visible属性来显示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>

Answer 1

Create a modal-form，

或者只是

将表单放在jquery模式中，

登录示例

$(function() {
    $( "#login" ).dialog({
      modal: true,
      autoOpen: false,
      buttons: {
        Ok: function() {
          $( this ).dialog( "close" );
        }
        Submit: function(){
          $(this).find('form').submit();
        }
      }
    });
  });

Answer 2

在＆＃34;模式＆＃34;中使用标准UI元素 - JQuery UI dialog制度。

Answer 3

你可以使用这样的div，把它放在身后。确保没有任何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";

}

如何启用单个div标签并禁用整个页面

3 个答案: