`

使用DIV半透明效果来禁用页面所有功能

JavaScriptJSPHTML 
阅读更多

使用DIV半透明效果来禁用页面所有功能

 

方案一．

 

  <body>
  <div id="BodyMask"     
  style="display:none; filter:alpha(opacity=70); BACKGROUND: #CCCCCC; HEIGHT:100%; WIDTH:100%; left: 0px; position: absolute; top: 0px; " >
  </div>

  <div id="SubmitMSG"     
  style="display:none;BORDER-RIGHT: #d5a338 1px solid; PADDING-RIGHT: 9px; BORDER-TOP: #d5a338 1px solid; PADDING-LEFT: 9px;BACKGROUND: #ffffdb; LEFT: 25%; PADDING-BOTTOM: 5px; BORDER-LEFT: #d5a338 1px solid; WIDTH:50%; COLOR: #000000; LINE-HEIGHT: 17px; PADDING-TOP: 6px; BORDER-BOTTOM: #d5a338 1px solid; POSITION: absolute; TOP:20%; TEXT-ALIGN: left " >
  正在查询数据，请梢等......<br/>
  </div>

    <table>
     <tr>
      <td></td>
     </tr>
    </table>
    <table border="0" align="center" cellpadding="2" cellspacing="2">
      <tr>
        <td width="310">&nbsp;</td>
        <td width="237">&nbsp;</td>
        <td width="240">&nbsp;</td>
      </tr>    

   <tr>
        <td colspan="3" align="center" >
   <form name="statisfrm" method="post" action="test.jsp?act=post">
              <table width="30%"  border="0" cellspacing="1" cellpadding="0">               
    <tr class="manageHead">
                  <td  colspan="2" align="center">
     <input type="button" name="queryTheme" value="submit" onclick="javascript:getDeptResultStatis()" />       
      </td>
                </tr>     
     </table>
   </form>
  </td>
      </tr>
   <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
  </table>
  </body>


  <script language="javascript">
 function getDeptResultStatis()
 {   
  document.getElementById("BodyMask").style.display="";//显示
  document.getElementById("SubmitMSG").style.display="";//显示
  //document.statisfrm.submit();  
 }
     
</script>

</html>

 

方案二．

 
如何想禁用页面所有功能，不能用户点击可以使用DIV的半透明效果来实现，非常方便，界面效果也不错。思路是用户点击按钮，调用一个javascript方法，显示预先在页面中定义好的隐藏div，返回结果后再隐藏div，允许用户继续操作。下面看实现的方法： <html><head>    <title>半透明div</title>

如何想禁用页面所有功能，不能用户点击可以使用DIV的半透明效果来实现，非常方便，界面效果也不错。思路是用户点击按钮，调用一个javascript方法，显示预先在页面中定义好的隐藏div，返回结果后再隐藏div，允许用户继续操作。
下面看实现的方法：

<html>
<head>
    <title>半透明div</title>
   <style>
.#mask {
visibility: hidden;
background-color: #cccccc;
left: 0px;
position: absolute;
top: 0px;
background-image: none;
filter: alpha(opacity :   50);
}

.#dialog {
visibility: hidden;
background-color: #f7fcfe;
z-index: 100;
width: 300px;
height: 50px;
position: absolute;
text-align: center;
font-size: 30px;
color: #FF0000;
font-weight: bold;
vertical-align: middle;
}
</style>



<script language="javaScript">
function show()
{
    var d_mask=document.getElementById('mask');
    var d_dialog = document.getElementById('dialog');


    d_mask.style.width = document.body.clientWidth ;
    d_mask.style.height=document.body.clientHeight;

    //网页正文全文
    //d_mask.style.width = document.body.scrollWidth ;
    //d_mask.style.height=document.body.scrollHeight;


    d_dialog.style.top = document.body.clientHeight / 2 - 60;
    d_dialog.style.left =document.body.clientWidth / 2 -100;

    d_mask.style.visibility='visible';
    d_dialog.style.visibility='visible';

}


function divBlock_event_mousedown()
{
var e, obj, temp;
obj=document.getElementById('dialog');
e=window.event?window.event:e;
obj.startX=e.clientX-obj.offsetLeft;
obj.startY=e.clientY-obj.offsetTop;
document.onmousemove=document_event_mousemove;
temp=document.attachEvent?document.attachEvent('onmouseup',document_event_mouseup):document.addEventListener('mouseup',document_event_mouseup,'');
}


function document_event_mousemove(e)
{
var e, obj;
obj=document.getElementById('dialog');
e=window.event?window.event:e;
with(obj.style){
    position='absolute';
    left=e.clientX-obj.startX+'px';
    top=e.clientY-obj.startY+'px';
    }
}

function document_event_mouseup(e)
{
var temp;
document.onmousemove='';
temp=document.detachEvent?document.detachEvent('onmouseup',document_event_mouseup):document.removeEventListener('mouseup',document_event_mouseup,'');
}


window.onresize = function()
{
    var d_mask=document.getElementById('mask');
    var d_dialog = document.getElementById('dialog');


    d_mask.style.width = document.body.clientWidth ;
    d_mask.style.height=document.body.clientHeight;
}
</script>
</head>
<div id ="mask"></div>
<div id ="dialog" onmousedown="divBlock_event_mousedown()">处理中，请等待……</div>
<body>
    <table border='0' width="100%" height="100%">
        <tr>
            <td>
                测试
            </td>
        </tr>
        <tr>
           <td>
              <input type="button" value="显示div" onclick="show()" />
           </td>
        </tr>
    </table>
</body>
</html>
分享到：
| 如何通过TCPIP端口为系统添加网络打印机( ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JQuery拖动窗口,拖动时有半透明效果,

    本主题聚焦于使用jQuery实现一个可拖动的窗口，并在拖动过程中呈现出半透明的效果，这在创建交互式用户界面时十分有用。以下是关于这个功能的详细解释和实现步骤。 1. **理解jQuery拖动事件** jQuery提供了`....

    div模拟弹出窗口，web2.0体现

    在这个场景中，我们将深入探讨如何使用JavaScript和HTML的div元素来创建弹出窗口，以及如何实现窗口的移动和半透明效果。 首先，让我们了解"div"。在HTML中，div（division）是一个用于分组其他HTML元素的容器，...

    div css窗口 模态窗口

    在网页设计中，`div` 和 `css` 是构建页面布局和样式...综上所述，使用 `div` 和 `css` 结合 `JavaScript` 可以创建功能完善的模态窗口。理解这些基础知识，你就可以根据需求自由地设计和控制网页上的各种交互式弹窗。

    Jquery遮罩曾半透明特效

    在给定的标题“Jquery遮罩曾半透明特效”中，我们关注的是如何使用 jQuery 来创建具有半透明效果的遮罩层。这种特效在网页设计中很常见，例如用于加载提示、模态窗口或用户交互时的背景覆盖。 首先，我们需要理解...

    用Delphi 实现类似迅雷、QQ旋风的半透明浮动窗口

    本教程将聚焦于如何使用Delphi这一强大的Object Pascal集成开发环境（IDE）来实现类似于迅雷和QQ旋风的半透明浮动窗口效果。Delphi以其高效、直观的组件化编程模式，使得实现这样的功能变得相对简单。 首先，我们...

    WIN7全透明效果系统监测

    这项功能让Windows 7的界面看起来更加现代和美观，它赋予了窗口边框、任务栏以及开始菜单半透明的效果，使得桌面背景能够透过窗口边缘可见，提升了用户界面的视觉体验。 在Windows 7中，Aero Glass效果不仅提供了...

    CSS 页面置灰等待效果

    然后，我们可以创建一个覆盖整个页面的全屏div，将其设置为半透明灰色，以达到置灰的效果。例如： ```css .waiting-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-...

    JS变灰页面显示遮罩层登录窗口，使页面无法操作

    这种效果通常通过JavaScript（JS）配合CSS来实现，其中涉及到的技术包括页面元素禁用、遮罩层创建以及Ajax无刷新加载。下面我们将详细讨论这些知识点。 1. **JS变灰页面**： 在JavaScript中，我们可以使用DOM操作...

    android webview加速和透明设置例子

    "&gt;半透明的div&lt;/div&gt; ``` 这里的`rgba(0, 0, 0, 0.5)`表示黑色，透明度为50%。 二、WebView加速加载 为了提升WebView的加载速度，我们可以采取以下几种策略： 1. **启用硬件加速**：在应用的AndroidManifest.xml...

    点击弹出窗口网页背景变暗且不可点的效果(二)：iframe实现

    3. 对背景页面应用CSS样式，降低其透明度或添加半透明遮罩层，以实现背景变暗的效果。这可以通过设置body或者其他包含所有内容的元素的CSS属性，如`opacity`或添加额外的`div`作为遮罩来实现。 4. 使用JavaScript...

    [jQuery] 解決 IE6 PNG 透明背景 (Supersleight jQuery Plugin for Transparent PNGs in IE6)

    PNG24格式提供了24位颜色深度，允许显示超过1600万种颜色，并且支持完全透明和半透明效果。然而，在IE6中，只有8位的PNG8格式才能正确显示透明，这限制了设计师使用高级透明效果的能力。因此，Supersleight应运而生...

    flash可以被一个div覆盖的例子

    /* 可以是透明或半透明，以便看到Flash内容 */ z-index: 2; /* 设置为比Flash更高的值，使其覆盖Flash */ } &lt;div id="flashContainer"&gt; &lt;!-- Flash内容 --&gt; &lt;div id="coverDiv"&gt;&lt;/div&gt; &lt;/div&gt; ``` ...

    完全纯css实现div自适应居中兼容IE7 Chrome FireFox

    解决方法是使用额外的div元素包裹需要半透明效果的div，并对额外的div应用半透明背景。 4. **响应式布局的适应性**： 除了让布局能够在页面中居中之外，响应式布局还要求布局能够根据屏幕大小的变化作出相应的调整...

    jQuery弹出登录遮罩层效果

    遮罩层则是一个全屏的div元素，通常设置为半透明黑色背景，以达到遮挡主页面的效果。 ```html &lt;div id="mask"&gt;&lt;/div&gt; &lt;div id="loginBox"&gt; 用户名" /&gt; 密码" /&gt; 登录 &lt;/div&gt; ``` 2. **CSS样式**：使用CSS为...

    网页跳转代码和加载代码

    通常，这涉及到使用JavaScript来创建加载等待页，包括按钮等待效果、指定div区域的等待效果以及全屏等待效果。 1. **按钮等待效果**： 当用户点击一个按钮启动一个可能需要一段时间才能完成的操作时，如提交表单或...

    jQuery-带透明度的一个漂亮的弹出窗口

    现在，当弹出窗口显示时，会有一个半透明的背景层覆盖整个页面，用户点击背景或关闭按钮都可以关闭弹出窗口。 总结一下，使用jQuery实现带透明度的弹出窗口涉及的主要知识点有：jQuery的选择器、事件绑定（`.click...

    遮罩层 javascript js 数据提交

    在网页开发中，遮罩层（Mask Layer）是一种常见的用户界面设计元素，它用于在页面上覆盖一层半透明或不透明的元素，以突出显示特定的内容或者阻止用户与背景交互。"遮罩层 javascript js 数据提交"这个主题涉及到的...

    bootstrap模态框弹出效果.zip

    6. **模态背景（Modal Backdrop）**：这是一个全屏半透明层，用于阻止用户与背景交互，有`.modal-backdrop`类。 实现模态框弹出效果，首先需要在HTML中设置模态框结构，然后通过JavaScript插件来控制其行为。例如，...

    遮罩层方法（jquery）

    在网页开发中，遮罩层（Mask Layer）是一种常见的用户界面设计元素，它用于在页面上创建一个半透明或全透明的覆盖层，通常用于显示提示信息、加载等待或者阻止用户与页面其他部分的交互。在本例中，我们将探讨如何...

    js弹出对话框，其他灰屏，

    接着，我们需要改变页面的CSS，使除对话框外的所有元素变为半透明或不可点击，达到“灰屏”的效果。 以下是一个简单的实现步骤： 1. **创建对话框**：可以使用HTML创建一个对话框元素，并使用CSS进行样式设计，使...

Magicbox
Global site tag (gtag.js) - Google Analytics