`
piperzero
  • 浏览: 3477821 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

一个不错的弹出窗口的js效果(值的收藏)

阅读更多
<script type="text/javascript" language="javascript">
//more javascript from http://www.smallrain.net
function sAlert(str){
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>




<input type="button" value="点击这里" onclick="sAlert('test弹窗效果');" />
分享到:
评论

相关推荐

    程序天下:JavaScript实例自学手册

    12.18 幻灯片式弹出窗口 12.19 弹出窗口生成器 12.20 关不掉的警告框 12.21 循环的警告框 12.22 屏蔽状态栏的错误提示 12.23 获取模式窗口的值 第13章 日期和时间特效 13.1 指定时间关闭页面 13.2 最简单的时间日期...

    《程序天下:JavaScript实例自学手册》光盘源码

    12.18 幻灯片式弹出窗口 12.19 弹出窗口生成器 12.20 关不掉的警告框 12.21 循环的警告框 12.22 屏蔽状态栏的错误提示 12.23 获取模式窗口的值 第13章 日期和时间特效 13.1 指定时间关闭页面 13.2 最简单的时间日期...

    JavaScript网页特效范例宝典源码

    1.1 弹出窗口控制 2 实例001 打开新窗口显示广告信息 2 实例002 定时打开窗口 4 实例003 通过按钮创建窗口 5 实例004 自动关闭的广告窗口 6 实例005 控制弹出窗口居中显示 7 实例006 弹出的窗口之Cookie控制 9 实例...

    70款经典Dreamweaver插件

    MX128577_ultimatewindows 建立一个可自定义属性的弹出窗口,亦可建立一个居中的窗口 WordCount 字数统计 PreviousPage 建立返回前一页的超链接 PageTransitions 进入、退出页面的过渡转场效果,比如从中间打开、...

    Dreamweaver 插件集

    建立一个可自定义属性的弹出窗口,亦可建立一个居中的窗口 WordCount 字数统计 PreviousPage 建立返回前一页的超链接 PageTransitions 进入、退出页面的过渡转场效果,比如从中间打开、溶解...... Meta_Generator ...

    JavaScript实用范例词典04-14

    5.42 允许调整弹出窗口的大小... 143 5.43 弹出一个顶层窗口... 144 5.44 关闭窗口... 145 5.45 在主窗口上关闭弹出式窗口... 146 5.46 在弹出式窗口上关闭主窗口... 146 5.47 将主窗口中的资料输出到弹出式 ...

    JavaScript实例精通

    14_11.htm 自动弹出式窗口。 14_12.htm 自动滚屏。 第15章(\15) 示例描述:JavaScript操作表格和DOM。 15_1.htm 动态添加表格。 15_2.htm 获取表格的某行。 15_3.htm 获取某个表格的单元格。 15_4....

    《JavaScript实例精通》[源代码]

    14_11.htm 自动弹出式窗口。 14_12.htm 自动滚屏。 第15章(\15) 示例描述:JavaScript操作表格和DOM。 15_1.htm 动态添加表格。 15_2.htm 获取表格的某行。 15_3.htm 获取某个表格的单元格。 15_4....

    vc++ 应用源码包_1

    压缩包内有两个源码包,一个是注册机源程序,另一个是解密机的源程序,一套完整的参考实例。 VC+MapX源码含GPS跟踪演示 VC3D 利用VC编程在界面上实现3D文字 在MFC应用程序中浏览PDF、Word文档文件 vcdialog 自...

    vc++ 应用源码包_2

    压缩包内有两个源码包,一个是注册机源程序,另一个是解密机的源程序,一套完整的参考实例。 VC+MapX源码含GPS跟踪演示 VC3D 利用VC编程在界面上实现3D文字 在MFC应用程序中浏览PDF、Word文档文件 vcdialog 自...

    vc++ 应用源码包_6

    压缩包内有两个源码包,一个是注册机源程序,另一个是解密机的源程序,一套完整的参考实例。 VC+MapX源码含GPS跟踪演示 VC3D 利用VC编程在界面上实现3D文字 在MFC应用程序中浏览PDF、Word文档文件 vcdialog 自...

    vc++ 应用源码包_5

    压缩包内有两个源码包,一个是注册机源程序,另一个是解密机的源程序,一套完整的参考实例。 VC+MapX源码含GPS跟踪演示 VC3D 利用VC编程在界面上实现3D文字 在MFC应用程序中浏览PDF、Word文档文件 vcdialog 自...

    vc++ 应用源码包_3

    压缩包内有两个源码包,一个是注册机源程序,另一个是解密机的源程序,一套完整的参考实例。 VC+MapX源码含GPS跟踪演示 VC3D 利用VC编程在界面上实现3D文字 在MFC应用程序中浏览PDF、Word文档文件 vcdialog 自...

    PHP程序开发范例宝典III

    实例086 关闭弹出窗口时自动刷新父窗口 128 实例087 在弹出的对话框中选择个性头像 130 实例088 自动关闭的广告窗口 131 实例089 关闭IE主窗口时,不弹出询问对话框 132 实例090 弹出提示对话框并重定向...

    KODExplorer 芒果云-资源管理器

    - 弹出层中的弹出层关闭,父窗口失去焦点问题。 - 代码中grunt部分代码拆分开,放到程序外面;提交到git、osc - 桌面:删除alert enter快捷键删除 - install 检测 加入跳过,(只判断用到的函数) 加入多语言 - ...

    vc++ 开发实例源码包

    9:采用Messenger的弹出滑动消息提示框. 10:下载管理,虚拟文件夹. 11:自动ping. 12:连接到搜索引擎. 13:自动报告bug,建议等. 14:宏功能. 15:自动同步文件夹. 16:保存加载任务. 17:计划任务. 18:单线程下载时不能创建...

    网管教程 从入门到精通软件篇.txt

    网管教程 从入门到精通软件篇 ★一。★详细的xp修复控制台命令和用法!!! 放入xp(2000)的光盘,安装时候选R,修复! Windows XP(包括 ...JS:javascript源文件 JSP:HTML网页,其中包含有对一个Java servlet...

    苹果8XPC和手机二合一完整版

    MAC.Open(u,w,h) 弹出网页;u=网址,w=宽度,h=高度 MAC.Cookie.Set(name,value,days) 设置cookie的值; name=cookie名称,value=cookie值,days=过期时间 MAC.Cookie.Get(name) 获取cookie的值; name=cookie名称 MAC....

Global site tag (gtag.js) - Google Analytics