`
thtwin
  • 浏览: 160872 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

JS弹出(DIV)窗口,背景为半透明

    博客分类:
  • JS
阅读更多
<script type="text/javascript" language="javascript">
function sAlert(){
var str="test弹窗效果trybb.com";
var msgw,msgh,bordercolor;  
msgw=400;//提示窗口的宽度  
msgh=100;//提示窗口的高度  
titleheight=25 //提示窗口标题高度  
bordercolor="#c51100";//提示窗口的边框颜色  
titlecolor="#c51100";//提示窗口的标题颜色  

var sWidth,sHeight;  
sWidth=screen.width;  
sHeight=screen.height;  

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 = "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>

HTML代码:
<input type="button" value="点击这里" onClick="sAlert();" />
分享到:
评论

相关推荐

    网页中弹出小窗口,页面背景逐渐变为半透明.rar

    这里帖出两种效果,第一种是弹出时页面背景直接变为半透明,而第二种则对XP关机效果仿得更像一点儿,即背景是有一个逐渐变为半透明的过程,大家可以留心观察两种效果的区别,两种效果全部通过了IE6和firefox的测试。

    div模拟弹出窗口,web2.0体现

    使用js+div模拟弹出窗口,有可以移动的窗口,不可以移动的窗口,移动时候可以让div半透明效果。

    JavaScript实现弹出DIV层同时页面背景渐变成半透明效果

    主要介绍了JavaScript实现弹出DIV层同时页面背景渐变成半透明效果,涉及JavaScript弹出窗口的实现及页面元素属性动态变换的相关技巧,需要的朋友可以参考下

    JavaScript网页特效范例宝典源码

    实例007 为弹出的窗口加入关闭按钮 11 实例008 关闭弹出窗口时刷新父窗口 12 实例009 关闭IE主窗口时,不弹出询问对话框 13 1.2 弹出网页对话框 14 实例010 弹出网页模式对话框 14 实例011 弹出全屏显示的网页模式...

    弹出有遮罩的拖动层,简单模拟select(未做界面)

    弹出有半透明遮罩的div层,可拖动。弹出层在窗口自适应居中,简单用div和li模拟下select的效果。

    JQuery&CSS;&CSS;+DIV实例大全.rar

    1.jquery仿div透明模态弹出窗插件下载 2.jquery实现多风格消息弹出框插件jGrowl下载 3.jQuery弹出层插件PopupDiv-v1.0下载(支持ajax、居中等效果) 4.jQuery超炫淡入淡出效果DIV渐变居中弹出框插件下载 5....

    基于JavaScript如何制作遮罩层对话框

    2.在遮罩层上方在弹出一个层,由于遮罩层挡住了其他所有元素,用户只能点击弹出层,制造出模式窗口的假象。 废话不多说了,直接给大家贴js代码了。 &lt;head&gt; &lt;meta ...

    PHP程序开发范例宝典III

    实例073 半透明背景的下拉菜单 106 实例074 展开式导航条 110 实例075 解释型菜单 111 实例076 自动隐藏的弹出式菜单 112 实例077 收缩式导航菜单 114 实例078 树状导航菜单 116 实例079 鼠标右键菜单...

    商用版本文本编辑器DotNetTextBoxV6.0.8Source 源码

    6)调整了控件弹出窗口的方式,部分功能的模式窗口转换为Div+CSS的窗口! 7)调整pathtype属性默认值为AbsoluteFull(绝对全路径)! 8)增加对VS2008的支持,使用VS2008的用户请使用DotNetTextBox2008.sln打开项目,VS2005的...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part1

    实例220 半透明背景的下拉菜单 277 实例221 二级导航菜单 279 实例222 导航条的动画效果 281 第2篇 常用技术篇 第4章 文件操作 284 4.1 文件上传 285 实例223 以二进制形式上传文件到数据库 285 实例224 上传文件到...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part2

    实例220 半透明背景的下拉菜单 277 实例221 二级导航菜单 279 实例222 导航条的动画效果 281 第2篇 常用技术篇 第4章 文件操作 284 4.1 文件上传 285 实例223 以二进制形式上传文件到数据库 285 实例224 上传文件到...

Global site tag (gtag.js) - Google Analytics