遮照层样式:
/*背景层*/
.bjLayer{position:absolute;left:0px;top:0px;z-index:99999;
background-color:#333333;width:100%;height:100%;}
/*显示内容*/
.msgbox{position: absolute;height:auto;font-size:12px;top:50%;left:50%;}
脚本:
/*******************************************************************************************
* Creation date: 2010-10-13
http://www.51gouqu.com
* 下面的内容可以拷贝到一个JS文件里面
*********************************************************************************************/
var Timer = null;
/* 提示对话框 */
/*参数:背景层ID,内容层ID*/
function MessageBox(bjLayer,MessageBox){
//解决 火狐浏览器 下会复位
ScrollTop = GetBrowserDocument().scrollTop;
ScrollLeft = GetBrowserDocument().scrollLeft;
GetBrowserDocument().style.overflow = "hidden";
GetBrowserDocument().scrollTop = ScrollTop;
GetBrowserDocument().scrollLeft = ScrollLeft;
OpacityValue = 0;
S(MessageBox).style.display = "block";
try{S(bjLayer).filters("alpha").opacity = 0;}catch(e){};
S(bjLayer).style.opacity = 0;
S(bjLayer).style.display = "block";
S(bjLayer).style.height = GetBrowserDocument().scrollHeight + "px";
S(bjLayer).style.width = GetBrowserDocument().scrollWidth + "px";
Timer = setInterval("DoAlpha('"+bjLayer+"')",1);
//设置内容层位置
S(MessageBox).style.width = "515px"; /*自己根据显示内容的宽度来设置*/
S(MessageBox).style.marginTop = (-S(MessageBox).offsetHeight/2 + GetBrowserDocument().scrollTop) + "px";
S(MessageBox).style.marginLeft = (-S(MessageBox).offsetWidth/2 + GetBrowserDocument().scrollLeft) + "px";
}
var OpacityValue = 0;
var ScrollTop = 0;
var ScrollLeft = 0;
/*获取 多种浏览器下页面的高度 宽度*/
function GetBrowserDocument()
{
var _dcw = document.documentElement.clientHeight;
var _dow = document.documentElement.offsetHeight;
var _bcw = document.body.clientHeight;
var _bow = document.body.offsetHeight;
if(_dcw == 0) return document.body;
if(_dcw == _dow) return document.documentElement;
if(_bcw == _bow && _dcw != 0)
return document.documentElement;
else
return document.body;
}
/*设置背景层透明度*/
function SetOpacity(obj,opacity){
if(opacity >=1 ) opacity = opacity / 100;
try{obj.style.opacity = opacity; }catch(e){}
try{
if(obj.filters){
obj.filters("alpha").opacity = opacity * 100;
}
}catch(e){}
}
/*设置背景层透明度渐变效果*/
function DoAlpha(bjLayer){
if (OpacityValue > 20){clearInterval(Timer);return 0;}
OpacityValue += 5;
SetOpacity(S(bjLayer),OpacityValue);
}
/*关闭遮照层*/
function CloseMessageBox(bjLayer,MessageBox)
{
S(MessageBox).style.display = "none";
S(bjLayer).style.display = "none";
GetBrowserDocument().style.overflow = "";
GetBrowserDocument().scrollTop = ScrollTop;
GetBrowserDocument().scrollLeft = ScrollLeft;
}
/*建议不要使用 $ 名称 避免跟jquery 中的$函数冲突*/
function S(obj){
return document.getElementById(obj);
}
///////////////////////////////////////////////////////////////////////////////////////
页面调用:
function showTip() {
MessageBox("_bjLayer","_msgbox");
}
function closeTip() {
CloseMessageBox("_bjLayer","_msgbox");
//setTimeout("visit()",1000);
}
页面:
<body>
<div id="_bjLayer" class="bjLayer" style="filter: alpha(opacity=0); display: none;"> </div>
<div class="msgbox" style="display: none; z-index: 100000;" id="_msgbox">
欢迎来到<a href=http://www.51gouqu.com>51购趣网</a>,享受购物的乐趣
可以遮住下拉框哦~~
<input type="button" value="试试看" onclick="closeTip()"/>
</div>
<input type="button" value="显示遮照层" onclick="showTip()"/>
<select >
<option value="1" selected="selected">遮照层1</option>
<option value="2" >遮照层2</option>
<option value="3">遮照层3</option>
</select>
</body>
</html>
分享到：
相关推荐
select特色下拉框，自定义风格，自定义大小，下拉选择有滚动条
NULL 博文链接：https://backup-mail.iteye.com/blog/1679700
模仿 select 做的下拉菜单效果 兼容各个主流浏览器。谁用谁知道。
带搜索功能的select组件，支持IE8以上及其他浏览器，输入字符自动匹配，可以去博客看看具体细节：https://blog.csdn.net/u010554942/article/details/80593194
图片浏览器——JS
主要介绍了使用微信内置浏览器点击下拉框出现页面乱跳转现象（iphone），该怎么办的相关资料,需要的朋友可以参考下
下拉框美化下拉框美化下拉框美化下拉框美化下拉框美化下拉框美化下拉框美化下拉框美化下拉框美化下拉框美化下拉框美化下拉框美化下拉框美化下拉框美化
可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用...
这是一款堪称最完美的下拉框组件，特点如：美化的并且可自定义的外观、使用简单、支持分组、下拉列表展开的方向智能化、下拉框可编辑、集成了ajax联动功能、自定义下拉列表的列数、完美的浏览器兼容性等。...
下拉框支持主流浏览器，兼容IE5/6/7/8/9/10,不兼容Edge 下拉框有模糊搜索功能 下拉框的值有两个，text、data_id 代码是基于jquery的，版本使用的：
不管数据源是什么，也不管是ASP，JSP，PHP，。NET，只要给传一个符合格式的JS数组就行了. js多层联动下拉框菜单
js多选下拉框多选下拉框多选下拉框js多选下拉框多选下拉框多选下拉框
针对不同的网页元素控件，详细讲述使用不同的方法自动填写。在浏览器里就可以实现，不需要另外安装软件。自动填表方案放在软件收藏栏，使用时就像打开一个网址一样简单。
模仿google下拉框模仿google下拉框模仿google下拉框
无限极 分类 下拉框 无限极分类 下拉框 无限极分类下拉框
下拉框 新人练习下拉框
jquery select动态加载选择,兼容各种浏览器包括ie6,在ie6下会报错,不过我们已有解决方法，感兴趣的朋友可以了解下，或许对你学习jquery有所帮助
一个下拉框的值被选中后，触发另一个下拉框状态为可选！ 若值为空则为不可选！
js 可输入 下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框