<script type="text/javascript" language="javascript">
function showdiv(){
var str="这里是内容";//by dcdc723 http://dcdc723.iteye.com
var msgw,msgh,bordercolor;
msgw=400;//宽度
msgh=200;//高度
titleheight=25;
bordercolor="#c51100";//提示窗口的边框颜色
titlecolor="#c51100";//提示窗口的标题颜色
var sWidth,sHeight;
sWidth=screen.width-100;
sHeight=screen.height-200;
var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
//bgObj.style.background="#cccccc";页面背景颜色
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 = "100";
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 = "40%";
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 = "101";
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>
<a onclick="javascript:showdiv();">测试</a>
分享到:
相关推荐
适用小巧的纯js弹出层插件,具体见http://blog.csdn.net/luoyehanfei/article/details/41799969
MODALit是一款纯js响应式模态窗口和弹出层插件。MODALit可以用于制作lightbox,模态窗口,对话框和弹出层等。
javascript 弹出层+随页面滚动而滚动.html 几行javascript代码解决弹出层,并且覆盖整个页面,随着页面流动还流动 ( 不用jQuery.js )
纯js(javascript) 弹出层 对话框 弹出层,可以有半透明遮挡层。 div 模拟系统对话框,Alert Confirm Prompt
无js等代码,连onmouse系列代码都没有的纯静态弹出层效果
js 弹出层(可用于图片的预览,放大 ) 类似于凡客,京东商城上js效果
js弹出框-弹出层-拖拽-兼容 以前自己用的一个小插件。 纯js写的。 以前网上资料下的。 经过修改之后,兼容以及效果比较好用。 简单而精炼。 不需要jquery。
支持弹出层的鼠标拖动移动,该部分用纯js编写执行效率更高 支持ajax加载页面到弹出层 支持一个页面,同时弹出多个层互不干扰 支持模式化弹出,带遮罩层 支持自定义弹出层样式 自带3个事件,开启、关闭、移除 ...
js 弹出提示框 对话框 网页 隐藏DIV层 等
纯JS的遮罩层,可自行设置效果已经定位位置等
此demo实现了纯css实现炫酷吊炸天的页面弹出层导航菜单好看又好用的动画特效,可使用在自己的网站,后台管理上。
弹出层拖拽,使用纯js编写的...可支持变大缩小
SYSBOXUPS1.2弹窗盒子,是本人独立开发的后台通用系统SYSUI的扩展js插件,纯js,不依赖jquery库。经测试,支持IE6,7,8,IE,360,火狐,谷歌,safari等主流浏览器,支持移动端,支持扩展。是一款不错的前端弹窗插件。 ...
NULL 博文链接:https://javaxiaoyetan.iteye.com/blog/2158888
这是一个网站的登录按钮前端代码,内含CSS、JS、Html文件,可直接使用。点击可以弹出层,并可选择不同类型的身份进行登录。
弹出层想必大家都有见到过吧,在以前或许是使用js实现的,不过现在我们可以使用纯css来实现了,下面有个不错的示例,感兴趣的朋友可以参考下
话说现在各种插件出来了要实现弹出层真是太简单了,但个人有时觉得那些插件不实用经常会找一些纯js原生态的东西,下面来给各位分享一个原生太js div弹出层实例,有需要的朋友可一起看看。 这个不用多说了,直接贴代码...
主要为大家详细介绍了js+html5实现半透明遮罩层弹框效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
点击按钮弹出一个悬浮层,出现在中间位置。
内容索引:脚本资源,Ajax/JavaScript,GreyBox GreyBox 是基于纯JavaScript技术编写的无刷新弹出层插件,不属于任何一款Ajax框架,功能主要包括弹出图片插件、弹出ifame网页框架,弹出文字框插件,不过其功能远不至...