事先声明，一下例子均能跑通，但非本人所写，原创的链接已不得而知
事例一：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body style="margin:0;">
<div id="topCoverDiv" style="display:none;float:left;z-index:100;position:absolute;top:expression(this.offsetParent.scrollTop);left:expression(this.offsetParent.scrollLeft);width:100%;height:100%;filter:alpha(opacity=90);background-color:#888888;" oncontextmenu="return false;">
<div style="z-index:101;position:absolute;top:200px;left:200px;width:200px;height:200px;background-color:#FFFFFF;"><input type=button value="取消页面灰掉" onclick="disableBodyArea(false);" /></div>
</div>
<select><option >test</option></select>
<input type=button value="点击将页面灰掉" onclick="disableBodyArea(true);">
<br><br><br><br>
<br><br><br><br>
<select><option >test</option></select>
<br><br><br><br>
<br><br><br><br>
<select><option >test</option></select>
<select><option >test</option></select>
</body>
</html>
<script >
function window::onload() {
disableBodyArea(true);
}
function disableBodyArea(f){
document.getElementById('topCoverDiv').style.display = f? '':'none';
var allSelects=document.getElementsByTagName("select");
for(var i=0;i<allSelects.length;i++) {
allSelects[i].disabled=f;
}
}
</script>
事例三：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>提示信息框</title>
<style type="text/css">
a{ color:#000; font-size:12px;text-decoration:none}
a:hover{ color:#900; text-decoration:underline}
body{background:;filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#003366); overflow:hidden}
#massage_box{ position:absolute; left:expression((body.clientWidth-350)/2); top:expression((body.clientHeight-200)/2); width:350px; height:200px;filter:dropshadow(color=#666666,offx=3,offy=3,positive=2); z-index:2; visibility:hidden}
#mask{ position:absolute; top:0; left:0; width:expression(body.clientWidth); height:expression(body.clientHeight); background:#666; filter:ALPHA(opacity=60); z-index:1; visibility:hidden}
.massage{border:#036 solid; border-width:1 1 3 1; width:95%; height:95%; background:#fff; color:#036; font-size:12px; line-height:150%}
.header{background:#036; height:10%; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding:3 5 0 5; color:#fff}
</style>
</head>
<body onload="mask.style.visibility='visible';massage_box.style.visibility='visible'">
<div id="massage_box">
<div class="massage" id="information">
<div class="header" >
<div style="display:inline; width:150px; position:absolute">本站提示信息</div>
<span onClick="massage_box.style.visibility='hidden'; mask.style.visibility='visible'" style="float:right; display:inline; cursor:hand">×</span>
</div>
<ul style="margin-right:25"><li>
本人申明此博客所有文章（包括文章插图）均为原创，如需引用或转载请注明出处。
</li><li>欢迎大家对博文中观点留言评述，谢绝无聊人士无素质无观点的灌水漫骂。</li><li>本站已设背景音乐，听音乐盒中收集的音乐时请先到页面底部关闭背景音乐。</li></ul>
</div>
</div>
<div id="mask"></div>
<span onClick="mask.style.visibility='visible';massage_box.style.visibility='visible'" style="cursor:hand">
<a href="#">显示提示信息</a>
</span>
</body>
</html>
事例四：
<p>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type" /></p>
<script>
function msg(info){
var p=document.createElement("DIV");
if (!info) var info='略海素材网：</br>http://www.luehai.com';
p.id="p";
p.style.position="absolute";
p.style.width=document.body.scrollWidth;
p.style.height=(document.body.offsetHeight>document.body.scrollHeight)?'100%':document.body.scrollHeight;
p.style.zIndex='998';
p.style.top='0px';
p.style.left='0%';
p.style.backgroundColor="gray";
p.style.opacity='0.5';
p.style.filter="alpha(opacity=80)";
document.body.appendChild(p);
var p1=document.createElement("DIV");
var top=parseInt(parseInt(document.body.scrollHeight)*0.25)+document.body.scrollTop;
p1.style.position="absolute";
p1.style.width="300px";
p1.id="p1";
var left=Math.ceil(((document.body.scrollWidth)-parseInt(p1.style.width.replace('px','')))/2)+document.body.scrollLeft;
p1.style.height="200px";
p1.style.zIndex='999';
p1.style.top=top+'px';
p1.style.left=left+'px';
p1.style.border="0px solid red";
var html="";
html+="<center>"
html+="<div class='p3' style='height:1px;overflow:hidden;background:red;width:294px;border-left:1px solid red;border-right:1px solid red;'></div>"
html+="<div class='p2' style='height:1px;overflow:hidden;background:red;width:296px;border-left:1px solid red;border-right:1px solid red;'></div>"
html+="<div class='p2' style='height:1px;overflow:hidden;background:red;width:298px;border-left:1px solid red;border-right:1px solid red;'></div>"
html+="<div class='p1' style='height:20px;overflow:hidden;background:red;width:300px;border-left:1px solid red;border-right:1px solid red;color:#fff;font-size:9pt;font-weight:bold;text-align:left;'> ⊙ 略海提示</div>"
html+="<div id='c' style='height:150px;width:300px;background-color:#FEEACB;overflow:hidden;border-left:1px solid red;border-right:1px solid red;padding-top:40px;font-size:9pt;'>"+info+"<br><br><br>[ <a href='javascript:this.cancle()'>关闭</a> ]</div>"
html+="<div class='p1' style='height:1px;overflow:hidden;background:#FEEACB;width:298px;border-left:1px solid red;border-right:1px solid red;'></div>"
html+="<div class='p2' style='height:1px;overflow:hidden;background:#FEEACB;width:296px;border-left:1px solid red;border-right:1px solid red;'></div>"
html+="<div class='p3' style='height:1px;overflow:hidden;background:red;width:294px;border-left:1px solid red;border-right:1px solid red'></div>"
html+="</center>"
document.body.appendChild(p1);
p1.innerHTML=html;
var arr=document.getElementsByTagName("select");
var i=0;
while(i<arr.length){
arr[i].style.visibility='hidden';
i++;
}
this.cancle=function(){
document.body.removeChild(document.getElementById('p'));
document.body.removeChild(document.getElementById('p1'));
var arr=document.getElementsByTagName("select");
var i=0;
while(i<arr.length){
arr[i].style.visibility='visible';
i++;
}
}
}
</script><center><br>
<p><input type="button" onClick='msg()' value="页面提示效果" /></p></center>
分享到：
相关推荐
本文实例为大家分享了js实现蒙版效果展示的具体代码，供大家参考，具体内容如下 思路 1.监听按钮的点击 2.阻止冒泡（最关键的一点） 3.让隐藏的显示出来 4.隐藏滚动条 5.点击文档：获取点击的标签 判断：让显示的都...
本文将深入探讨“JQUERY插件-蒙版遮罩效果-toggleLoading”这一主题，它提供了在网页元素上添加遮罩效果的能力，以增加用户交互体验。 首先，让我们了解什么是蒙版和遮罩效果。在网页设计中，蒙版通常指的是用于...
在`TestApplication`这个项目中，开发者可能已经创建了一个名为`GuidanceMask`的自定义View或布局，用于实现蒙版效果。在实际应用中，可以根据具体需求调整蒙版的颜色、形状以及指引元素的样式和位置。 五、优化与...
在"蒙版实例"中，我们可以看到如何利用jQuery和CSS来实现各种蒙版效果，包括淡入淡出、滑动显示等，这些技巧对于增强网页交互性大有裨益。 在"layout"压缩包中，可能包含了jQuery Layout的示例代码、bpop插件的...
总之，这个压缩包中的代码和资源涉及到的是如何利用ViewPager实现带有高亮指示和蒙版效果的欢迎界面引导页面。开发者需要对Android UI组件、数据绑定、动画以及用户交互有深入理解，才能有效地利用这些资源创建出...
在Android中，我们可以使用自定义视图或者现有的库如`Material Design`的`BottomSheet`来实现蒙版效果。 1. **创建自定义蒙版** - 使用`Canvas`和`Paint`绘制一个矩形，设置透明度来实现半透明效果。 - 将蒙版...
在网页设计中，当用户等待页面内容加载时，为了提供更好的用户体验，我们常常会在页面上添加一个遮罩蒙版。遮罩蒙版可以是半透明的背景层，它覆盖整个页面，显示一个加载动画或者简单的文字提示，让用户知道页面正在...
在这个案例中，`jquery-1.4.4.min.js`是jQuery的早期版本，尽管现在有更新的版本可用，但这个旧版本仍然能够实现蒙版效果。 实现蒙版特效的基本步骤如下： 1. **引入依赖**：首先，在HTML文件（如`蒙版.html`）中...
在Android开发中，蒙版（Mask）通常用于创建启动引导页或者特定场景的交互效果，为用户提供一个引人入胜的用户体验。引导蒙版是一种设计技巧，它可以在应用首次启动时展示，帮助用户理解应用程序的主要功能和操作...
这个布局将在原界面之上，形成蒙版效果。 2. **定位高亮区域**：在蒙版层上，根据需要高亮的界面元素，绘制出相应的形状（如矩形、圆形等）。你可以使用`Shape Drawable`来定义这些形状，并设置填充颜色（通常是...
综上所述，"Android蒙版+广告自动无限轮播"的Demo实现涵盖了Android UI设计、动画效果、数据管理、网络请求、图片加载、性能优化等多个方面，对于Android开发者来说，这是一个很好的学习和实践案例。
在网页设计中，有时我们需要创建一种特殊的蒙版效果，即部分透明的蒙版，以便在遮盖大部分页面的同时，保留一部分区域保持清晰可见，展示页面上的动态内容。这个效果对于某些交互式设计或者特定的视觉展示非常有用。...
微信小程序实现蒙版弹窗效果的知识点主要包括以下几个方面： 1. 微信小程序基础知识：微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。小程序...
### 超简单蒙版：JQuery与JS结合实现强大蒙版效果 #### 一、蒙版概述 蒙版在Web开发中是一种常见的交互设计，主要用于遮罩网页其他部分，突出显示特定区域或对话框。在本文档中，我们将探讨如何使用JQuery和...
当用户在您的网站上遇到一个死胡同，我们的404错误页面模板能将潜在的挫败转化为一次愉悦的体验。这不仅是一个简单的错误页面，而是一段艺术，一份惊喜，一道亮丽的风景。 亮点介绍： 创意设计，将访客的失望转化...
JSP页面增加遮罩
在网页开发中，有时我们需要实现一个功能，即在页面上添加一个蒙版，并根据特定条件控制页面是否可滚动。这个需求通常出现在弹窗、模态框或者加载等待效果等场景。本文将详细介绍如何使用JavaScript来实现这样的功能...
在前端开发中，可以利用CSS的`position`、`z-index`属性以及`opacity`和`background-color`来创建蒙版效果。对于动态加载，可以结合JavaScript事件监听器，如`window.onload`或`$(document).ready()`，来控制蒙版的...
标题中的“jquery实现...综上所述，这个示例展示了如何使用jQuery和CSS创建一个带有蒙版效果的图片无缝滚动展示区，提供了一种动态、交互式的用户体验。通过理解这些关键点，开发者可以进一步定制自己的图片滚动效果。