如何启用单个 div 标签并禁用整个页面 [关闭]答案

【问题标题】：How to enable sigle div tag and disabling entire page [closed]如何启用单个 div 标签并禁用整个页面 [关闭]
【发布时间】：2013-09-05 13:56:04
【问题描述】：

如何使用 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>

【问题讨论】：

这……不清楚。主要是因为很难知道你想要什么结果：你想禁用所有表单输入吗？你想要灯箱式的效果吗？等等。

标签： javascript jquery html css

【解决方案1】：

Create a modal-form,

或者干脆

将您的表单放入 jquery modal 中，

登录示例，

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

【讨论】：

【解决方案2】：

在“模态”机制中使用标准 UI 元素 - JQuery UI dialog。

【讨论】：

【解决方案3】：

你可以使用这样的 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";

}

【讨论】：