<html>
<head>
<title>两个层的特效</title>
<style type="text/css">
*{
margin:0;padding:0;
}
</style>
</head>
<body>
<div class="cecmbody" id="cecmpolicy">
<div class="leftClass">
<p>测试</p>
<input type="button" value="点击这里" onclick="sAlert('测试效果');" />
</div>
<div class="rightClass">
</div>
</div>
<script type="text/javascript" language="javascript">
function sAlert(str){
var msgw,msgh,bordercolor;
msgw=400;//提示窗口的宽度
msgh=100;//提示窗口的高度
titleheight=25 //提示窗口标题高度
bordercolor="#336699";//提示窗口的边框颜色
titlecolor="#99CCFF";//提示窗口的标题颜色
var sWidth,sHeight;
sWidth=document.body.offsetWidth;
sHeight=screen.height;
var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#777";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity="0.6";
bgObj.style.left="0";
bgObj.style.width=sWidth + "px";
bgObj.style.height=sHeight + "px";
bgObj.style.zIndex = "10000";
document.body.appendChild(bgObj);
var msgObj=document.createElement("div")
msgObj.setAttribute("id","msgDiv");
msgObj.setAttribute("align","center");
msgObj.style.background="white";
msgObj.style.border="1px solid " + bordercolor;
msgObj.style.position = "absolute";
msgObj.style.left = "50%";
msgObj.style.top = "50%";
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.marginLeft = "-225px" ;
msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
msgObj.style.width = msgw + "px";
msgObj.style.height =msgh + "px";
msgObj.style.textAlign = "center";
msgObj.style.lineHeight ="25px";
msgObj.style.zIndex = "10001";
var title=document.createElement("h4");
title.setAttribute("id","msgTitle");
title.setAttribute("align","right");
title.style.margin="0";
title.style.padding="3px";
title.style.background=bordercolor;
title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
title.style.opacity="0.75";
title.style.border="1px solid " + bordercolor;
title.style.height="18px";
title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
title.style.color="white";
title.style.cursor="pointer";
title.innerHTML="关闭";
title.onclick=function(){
document.body.removeChild(bgObj);
document.getElementById("msgDiv").removeChild(title);
document.body.removeChild(msgObj);
}
document.body.appendChild(msgObj);
document.getElementById("msgDiv").appendChild(title);
var txt=document.createElement("p");
txt.style.margin="1em 0"
txt.setAttribute("id","msgTxt");
txt.innerHTML=str;
document.getElementById("msgDiv").appendChild(txt);
}
</script>
</body>
</html>
分享到:
相关推荐
自己制作的DIV模态窗口,点击弹出DIV窗口,后层页面屏蔽,实现模态窗口。需要用vs2010打开
一个使用div来实现的模态窗口实例!打破windows的传统模态窗口!
可实现任意拖动,有标题栏功能 var moveFlag = 0;//拖曳是否开始(0:否,1:是) var mouseBeginX = 0;//鼠标的起始x座标 var mouseBeginY = 0;//鼠标的起始y座标 var modeBeginTop = 0;//拖曳对象当前的top值 var ...
5个Jquery模态窗口,实现TABLE,DIV遮盖底层
本文实例讲述了js实现div模拟模态对话框展现URL内容。分享给大家供大家参考,具体如下: [removed] function sAlert(str){ var msgw,msgh,bordercolor; msgw=800;//提示窗口的宽度 msgh=600;//提示窗口...
JQuery Dialog(JS模态窗口,可拖拽的DIV) 效果实现代码
div+iframe做出的弹出窗口,效果等同于模态窗口。弹出窗口可最大化、最小化,可拖拽。带遮罩功能。 解决替换模态窗口,避免模态调模态出现的一系列问题:session丢失,提交返回,调父类方法层级多了或者多页面调的...
这篇文章主要介绍了JavaScript实现模态对话框实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 <!DOCTYPE html> <html lang="en"> <head> ...
一个javascript特效实例,在页面捕捉鼠标划词,弹出分享模态div。
HTML遮罩层实现源码,包括html、js、css和图片,并结合loading提示和DIV模拟模态窗口的示例展示遮罩层的使用
TML遮罩层实现源码,包括html、js、css和图片,并结合loading提示和DIV模拟模态窗口的示例展示遮罩层的使用
我们经常要在程序的人机交互中用到模态窗口,但在B/S开发中,这一切变得不容易了,虽然也可以用window.showModalDialog函数实现(见http://dotnet.aspx.cc/ShowDetail.aspx?id=49ML4AO8-5PB3-4KNY-NJZD-LJOIOXV4M1X4...
自定义一个jquery模态窗口插件,将它集成到现有平台框架中时,它只能在mainFrame窗口中显示,无法在顶层窗口显示. 解决这个问题的办法: 通过以下代码就可能实现在顶层窗口弹窗 代码如下: $(window.top.document....
没什么好说的,都是js,用一个iframe将页面遮挡,iframe上面一个div层,js面向对象做的,其中有部分是js动态生成style。ModeWindow.js 代码如下:<html xmlns=”http://www.w3.org/1999/xhtml”> <head ...
//----------------弹出DIV仿模态窗口开始---------------- var divW; //DIV宽度 var divH; //DIV高度 var clientH; //浏览器高度 var clientW; //浏览器宽度 var divTitle; //DIV标题 var pageUrl; //DIV中加载的...
该插件是基于开源JS库库jquery.leanModal.min.js改造而来,其官网http://leanmodal.finelysliced.com.au/,LeanModal 是一个简单的 jQuery 插件,用于实现模态窗口。它是专为小的对话框,提示和面板等需要使用模式...
4.jquery+div实现同时滑动切换的图文展示特效插件下载 5.jquery+div带动画按钮图片手动与自动切换的特效代码 6.jquery一页多用的飞飞图片幻灯插件演示 7.jquery仿flash产品图片多角度展示特效代码 8.jquery...
可拖拽的bootstrap弹出窗口结合jquery-ui实现的弹出和拖拽效果。
模仿模态窗口的浮动层,并且浮动层中内容通过ajax实现异步刷新. 1,无限制弹出层,多次弹出层的话,要标明序号0,1,2... 2,弹出层时,禁止滚动条、禁止刷新。如有多层弹出层,则只有将最先弹出的层关闭,才可以...
3) 修正使用showModalDialog模态窗口打开控件所在页面时控件无法使用的BUG。 <br> 2007/7/31 Version 3.2.6 Free <br>Updates: 1) 修正插入信纸功能中插入空白之后右键菜单失效的BUG。 2) ...