JS 实现图层模式覆盖效果
效果不错的JS 实现图层模式覆盖效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>MessageBox演示</title> <mce:script language="javascript"><!-- /**//******************************************************************************************* * 下面的内容可以拷贝到一个JS文件里面 *********************************************************************************************/ // 控制按钮常量 var MB_OK = 0; var MB_CANCEL = 1; var MB_OKCANCEL = 2; var MB_YES = 3; var MB_NO = 4; var MB_YESNO = 5; var MB_YESNOCANCEL = 6; // 控制按钮文本 var MB_OK_TEXT = "确定"; var MB_CANCEL_TEXT = "取消"; var MB_YES_TEXT = " 是 "; var MB_NO_TEXT = " 否 "; //提示图标 var MB_ICON = "http://2lin.net/image/information.gif"; //委托方法 var MB_OK_METHOD = null; var MB_CANCEL_METHOD = null; var MB_YES_METHOD = null; var MB_NO_METHOD = null; var MB_BACKCALL = null; var MB_STR = '<mce:style type="text/css"><!-- ' + 'body{margin:0px;}' + '.msgbox_title{background-color: #B1CDF3;height:25px;position:relative;font-size:14px;line-height:25px;padding-left:10px;border-bottom:1px solid #000;}' + '.msgbox_control{text-align:center;clear:both;height:28px;}' + '.msgbox_button{background-color: #B1CDF3;border:1px solid #003366;font-size:12px;line-height:20px;height:21px;}' + '.msgbox_content{padding:10px;float:left;line-height: 20px;}' + '.msgbox_icon{width: 50px;height: 50px;float: left;text-align: center;line-height:50px;padding-top:10px;}' + '.msgbox_mask{position:absolute;left:0px;top:0px;z-index:99999;background-color:#333333;width:100%;height:100%;}' + '.msgbox{background-color: #EFFAFE;position: absolute;height:auto;font-size:12px;top:50%;left:50%;border:1px solid #999999;}' + ' --></mce:style><style type="text/css" mce_bogus="1">' + 'body{margin:0px;}' + '.msgbox_title{background-color: #B1CDF3;height:25px;position:relative;font-size:14px;line-height:25px;padding-left:10px;border-bottom:1px solid #000;}' + '.msgbox_control{text-align:center;clear:both;height:28px;}' + '.msgbox_button{background-color: #B1CDF3;border:1px solid #003366;font-size:12px;line-height:20px;height:21px;}' + '.msgbox_content{padding:10px;float:left;line-height: 20px;}' + '.msgbox_icon{width: 50px;height: 50px;float: left;text-align: center;line-height:50px;padding-top:10px;}' + '.msgbox_mask{position:absolute;left:0px;top:0px;z-index:99999;background-color:#333333;width:100%;height:100%;}' + '.msgbox{background-color: #EFFAFE;position: absolute;height:auto;font-size:12px;top:50%;left:50%;border:1px solid #999999;}' + '</style>' + '<div id="msgBoxMask" class="msgbox_mask" style="filter: alpha(opacity=0);display:none;" mce_style="filter: alpha(opacity=0);display:none;"></div>' + '<div class="msgbox" style="display:none; z-index:100000;" mce_style="display:none; z-index:100000;" id="msgBox">' + '<div class="msgbox_title" id="msgBoxTitle"></div>' + '<div class="msgbox_icon" id="msgBoxIcon"></div>' + '<div class="msgbox_content" id="msgBoxContent"></div>' + '<div class="msgbox_control" id="msgBoxControl"></div></div>'; var Timer = null; document.write(MB_STR); var icon = new Image(); icon.src = MB_ICON; /**//* 提示对话框 * 参数 1 : 提示内容 * 参数 2 : 提示标题 * 参数 3 : 图标路径 * 参数 4 : 按钮类型 */ function MessageBox(){ var _content = arguments[0] || "这是一个对话框!"; var _title = arguments[1] || "提示"; var _icon = arguments[2] || MB_ICON; var _button = arguments[3] || MB_OK; MB_BACKCALL = arguments[4]; var _iconStr = '<img src="{0}" mce_src="{0}">'; var _btnStr = '<input name="{0}" id="{0}" type="button" class="msgbox_button" value="{1}" οnclick="MBMethod(this)" />'; switch(_button) { case MB_CANCEL : _btnStr = _btnStr.toFormatString("msgBoxBtnCancel", MB_CANCEL_TEXT); break; case MB_YES : _btnStr = _btnStr.toFormatString("msgBoxBtnYes", MB_YES_TEXT); break; case MB_NO : _btnStr = _btnStr.toFormatString("msgBoxBtnNo", MB_NO_TEXT); break; case MB_OKCANCEL : _btnStr = _btnStr.toFormatString("msgBoxBtnOk", MB_OK_TEXT) + " " + _btnStr.toFormatString("msgBoxBtnCancel", MB_CANCEL_TEXT); break; case MB_YESNO : _btnStr = _btnStr.toFormatString("msgBoxBtnYes", MB_YES_TEXT) + " " + _btnStr.toFormatString("msgBoxBtnNo", MB_NO_TEXT); break; case MB_YESNOCANCEL : _btnStr = _btnStr.toFormatString("msgBoxBtnYes", MB_YES_TEXT) + " " + _btnStr.toFormatString("msgBoxBtnNo", MB_NO_TEXT) + " " + _btnStr.toFormatString("msgBoxBtnCancel", MB_CANCEL_TEXT); break; default : _btnStr = _btnStr.toFormatString("msgBoxBtnOk", MB_OK_TEXT); break; } //解决 FF 下会复位 ScrollTop = GetBrowserDocument().scrollTop; ScrollLeft = GetBrowserDocument().scrollLeft; GetBrowserDocument().style.overflow = "hidden"; GetBrowserDocument().scrollTop = ScrollTop; GetBrowserDocument().scrollLeft = ScrollLeft; $("msgBoxTitle").innerHTML = _title; $("msgBoxIcon").innerHTML = _iconStr.toFormatString(_icon); $("msgBoxContent").innerHTML = _content; $("msgBoxControl").innerHTML = _btnStr; OpacityValue = 0; $("msgBox").style.display = ""; try{$("msgBoxMask").filters("alpha").opacity = 0;}catch(e){}; $("msgBoxMask").style.opacity = 0; $("msgBoxMask").style.display = ""; $("msgBoxMask").style.height = GetBrowserDocument().scrollHeight + "px"; $("msgBoxMask").style.width = GetBrowserDocument().scrollWidth + "px"; Timer = setInterval("DoAlpha()",1); //设置位置 $("msgBox").style.width = "100%"; $("msgBox").style.width = ($("msgBoxIcon").offsetWidth + $("msgBoxContent").offsetWidth + 2) + "px"; $("msgBox").style.marginTop = (-$("msgBox").offsetHeight/2 + GetBrowserDocument().scrollTop) + "px"; $("msgBox").style.marginLeft = (-$("msgBox").offsetWidth/2 + GetBrowserDocument().scrollLeft) + "px"; if(_button == MB_OK || _button == MB_OKCANCEL){ $("msgBoxBtnOk").focus(); }else if(_button == MB_YES || _button == MB_YESNO || _button == MB_YESNOCANCEL){ $("msgBoxBtnYes").focus(); } } 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(){ if (OpacityValue > 20){clearInterval(Timer);return 0;} OpacityValue += 5; SetOpacity($("msgBoxMask"),OpacityValue); } function MBMethod(obj) { switch(obj.id) { case "msgBoxBtnOk" : if(MB_BACKCALL) {MB_BACKCALL(MB_OK);} else {if(MB_OK_METHOD) MB_OK_METHOD();} break; case "msgBoxBtnCancel" : if(MB_BACKCALL) {MB_BACKCALL(MB_CANCEL);} else {if(MB_CANCEL_METHOD) MB_CANCEL_METHOD();} break; case "msgBoxBtnYes" : if(MB_BACKCALL) {MB_BACKCALL(MB_YES);} else {if(MB_YES_METHOD) MB_YES_METHOD();} break; case "msgBoxBtnNo" : if(MB_BACKCALL) {MB_BACKCALL(MB_NO);} else {if(MB_NO_METHOD) MB_NO_METHOD();} break; } MB_OK_METHOD = null; MB_CANCEL_METHOD = null; MB_YES_METHOD = null; MB_NO_METHOD = null; MB_BACKCALL = null; MB_OK_TEXT = "确定"; MB_CANCEL_TEXT = "取消"; MB_YES_TEXT = " 是 "; MB_NO_TEXT = " 否 "; $("msgBox").style.display = "none"; $("msgBoxMask").style.display = "none"; GetBrowserDocument().style.overflow = ""; GetBrowserDocument().scrollTop = ScrollTop; GetBrowserDocument().scrollLeft = ScrollLeft; } String.prototype.toFormatString = function(){ var _str = this; for(var i = 0; i < arguments.length; i++){ _str = eval("_str.replace(///{"+ i +"//}/ig,'" + arguments[i] + "')"); } return _str; } function $(obj){ return document.getElementById(obj); } /** // --></mce:script> <mce:script language="javascript"><!-- function test() { var _msg = "<font color=red><b>演示:</b></font><br/>普通对话框!"; MessageBox(_msg); } function test1() { MB_OK_METHOD = function(){alert('你按了OK');} MB_YES_METHOD = function(){alert('你按了YES');} MB_NO_METHOD = function(){alert('你按了NO');} MB_CANCEL_METHOD = function(){alert('你按了CANCEL');} var _msg = "<font color=red><b>演示:</b></font><br/>调用对话框。是、否、取消"; MessageBox(_msg,"演示",null,MB_YESNOCANCEL); } function test2() { var _msg = "<font color=red><b>演示:</b></font><br/>调用对话框。是、否、取消"; MessageBox(_msg,"演示",MB_ICON,MB_YESNOCANCEL,callback); } function test4() { var _msg = "<font color=red><b>演示:</b></font><br/>调用对话框。确定、取消"; MessageBox(_msg,"演示",MB_ICON,MB_OKCANCEL,callback); } function callback(value) { switch(value) { case MB_OK : alert('你按了OK'); break; case MB_YES : alert('你按了YES'); break; case MB_NO : alert('你按了NO'); break; case MB_CANCEL : alert('你按了CANCEL'); break; } } function test3() { MB_YES_TEXT = "演示一"; MB_NO_TEXT = "演示二"; MB_CANCEL_TEXT = "演示三"; var _msg = "<font color=red><b>演示:</b></font><br/>这是自定义的对话框<br/> <font color=green>MB_YES_TEXT MB_NO_TEXT MB_CANCEL_TEXT MB_OK_TEXT</font>"; MessageBox(_msg,"演示",MB_ICON,MB_YESNOCANCEL,callback); } // --></mce:script> </head> <body> <a href="javascript:test()" mce_href="javascript:test()">普通演示</a> <a href="javascript:test1()" mce_href="javascript:test1()">回调演示一</a><br/><br/><br/><br/> <a href="javascript:test2()" mce_href="javascript:test2()">回调演示二</a><br/><br/><br/><br/><br/><br/> <a href="javascript:test4()" mce_href="javascript:test4()">回调演示三</a><a href="javascript:test3()" mce_href="javascript:test3()"></a> <a href="javascript:test3()" mce_href="javascript:test3()">自定义演示</a> <br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> <p>a</p> </body> </html>
JS 实现图层模式覆盖效果相关推荐
- JS模拟模式窗口效果
<html> <head> <meta http-equiv="Content-Type" content="text/html; ...
- 魔鬼的梦魇—验证IE中的js内存泄露模式(三)
魔鬼的梦魇-验证IE中的js内存泄露模式(三) 按照Justin Rogers文章的顺序,接下来的这个模式应该是跨页内存泄露模式(cross-page leak),但是由于这个模式产生的中间对象,我们 ...
- Leaflet中使用Leaflet.Pin插件实现图层要素编辑效果
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 前面所引用的 ...
- 1.4_16 Axure RP 9 for mac 高保真原型图 - 案例15 【动态面板-滚动条5】深色模式 - 按钮效果升级
相关链接 目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解 元件库,会使用元件库中的成品进行改造 2. 掌握 在 概要 模块的使用技巧 一.成品效果 ...
- js高级04-- 沙箱模式、函数的4种调用模式(call()、apply())、构造函数的return关键字
沙箱: <script>//沙箱//与外界隔绝的一个环境,外界无法修改该环境内任何信息,沙箱内的东西单独属于一个世界//360沙箱模式//将软件和操作系统进行隔离,以达到安全的目的//苹果 ...
- 【加强版】js原生实现拖拽效果,这次没有用document的mousedown、mousemove、mouseup事件我们来点实际的(但是有个弊端:拖拽过程中鼠标会变成一个禁用符号,不太友好)
<div class='dragged'></div> //初始化需要拖拽的列initDrags() {var arr = document.querySelectorAll( ...
- 【墙裂推荐】【原生基础版】js原生实现拖拽效果,注意不要忘了div的cursor用grab和grabbing 还是古法炮制、传统工艺的原生代码兼容性最好,推荐
以下方式的劣势就是在放弃拖拽那一刻会触发click事件,通常如果被拖拽元素还有其他点击事件,会重复触发,往往并非业务需求.优势就是-额-貌似这段代码没什么屌优势! <div class='dra ...
- js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
- video.min.js php,使用flv.js与video.js做一个视频直播效果
这次给大家带来使用flv.js与video.js做一个视频直播效果,使用flv.js与video.js做出视频直播效果的注意事项有哪些,下面就是实战案例,一起来看一下. 环境配置 首先运行livego ...
- 纯JS制作的窗户雨滴效果
今天本站推荐的代码是用JS制作的窗户雨滴效果,绚丽的效果不亚于FLASH,由于不知出处在哪,总而言之, 在此感谢作者的慷慨分享. function demo() { var engine = new ...
最新文章
- 防止论坛批量小广告指南
- 启动tomcat时,一直卡在Deploying web application directory这块的解决方案
- UA MATH563 概率论的数学基础 中心极限定理17 0-1律的应用
- spring-session用redis实现session共享实践
- 10g数据库入门与实践 oracle_从实践中学习Oracle SQL笔记一
- 产品经理的职责(转)
- 【Java】Junit、反射和注解的笔记
- HDU3534 给你一个树让你找出其中最长路径以及个数数
- 当运行 Linux 内核的机器死机时...
- 分布式监控系统Zabbix3.2给异常添加邮件报警
- 周边pd是什么意思_pd是什么意思 饭圈pd是什么意思
- Cuda驱动安装/更新
- python mro文件_Python中MRO
- 异地监控组网实战案例(速度快)
- 快递电子面单接口php,快递电子面单
- (最新整理)国内网页设计网站网址大全(转)
- c语言数组太大,如何处理c语言大数组
- python波形峰值检测
- ModelX一款开源的机器学习模型管理仓库
- oracle 制作日历表,oracle 用sql生成日历的方法
热门文章
- you are in emergency mode解决办法
- 员工不明白面试流程,傻傻等了三个月,收到面试评价短信蒙了
- javaWeb项目加入IP黑白名单
- java解析加密excel,java poi 打开加密 excel?该怎么处理
- 电子邮箱号码大全,至尊邮为你打开邮箱的正确格式
- python如何编写爬虫程序_python编写网络爬虫程序
- 了解5G技术与未来5G面临的问题
- 使用FFmpeg合并/解密/下载m3u8文件转为mp4格式
- ae正在发生崩溃_本专业人才懂的梗 “pr未响应 ae正在发生崩溃”
- Fxfactory插件:复古电影调色插件Sheffield Softworks Vintage