文档章节

关于弹出提示框的一种比较好的方式

wangrikui
 wangrikui
发布于 2014/01/05 15:53
字数 795
阅读 21
收藏 0
html

<html>
<head>
<title>弹出提示框的例子</title>
</head>

<body>
   
   <input type="button" value="弹出提示框" onclick="sAlert('测试效果<br/>嗯!效果还不错!');" />

<script type="text/javascript" language="javascript">
function sAlert(str){
   var msgw,msgh,bordercolor;
   msgw=400;//提示窗口的宽度
   msgh=100;//提示窗口的高度
   titleheight=25; //提示窗口标题高度
   bordercolor="#60a76b";//提示窗口的边框颜色
   titlecolor="#99CCFF";//提示窗口的标题颜色

   var sWidth,sHeight;
   sWidth=document.body.offsetWidth;//浏览器工作区域内页面宽度
   sHeight=screen.height;//屏幕高度(垂直分辨率)


   //背景层(大小与窗口有效区域相同,即当弹出对话框时,背景显示为放射状透明灰色)
   var bgObj=document.createElement("div");//创建一个div对象(背景层)
   //定义div属性,即相当于
   //<div id="bgDiv" style="position:absolute; top:0; background-color:#777; filter:progid:DXImagesTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75); opacity:0.6; left:0; width:918px; height:768px; z-index:10000;"></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);//在body内添加该div对象


   var msgObj=document.createElement("div")//创建一个div对象(提示框层)
   //定义div属性,即相当于
   //<div id="msgDiv" align="center" style="background-color:white; border:1px solid #336699; position:absolute; left:50%; top:50%; font:12px/1.6em Verdana,Geneva,Arial,Helvetica,sans-serif; margin-left:-225px; margin-top:npx; width:400px; height:100px; text-align:center; line-height:25px; z-index:100001;"></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");//创建一个h4对象(提示框标题栏)
   //定义h4的属性,即相当于
   //<h4 id="msgTitle" align="right" style="margin:0; padding:3px; background-color:#336699; filter:progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100); opacity:0.75; border:1px solid #336699; height:18px; font:12px Verdana,Geneva,Arial,Helvetica,sans-serif; color:white; cursor:pointer;" onclick="">关闭</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=removeObj;

   var button=document.createElement("input");//创建一个input对象(提示框按钮)
   //定义input的属性,即相当于
   //<input type="button" align="center" style="width:100px; align:center; margin-left:250px; margin-bottom:10px;" value="关闭">
   button.setAttribute("type","button");
   button.setAttribute("value","关闭");
   button.style.width="60px";
   button.style.align="center";
   button.style.marginLeft="250px";
   button.style.marginBottom="10px";
   button.style.background=bordercolor;
   button.style.border="1px solid "+ bordercolor;
   button.style.color="white";
   button.style.cursor="hand";
   button.onclick=removeObj;
 
   function removeObj(){//点击标题栏触发的事件
     document.body.removeChild(bgObj);//删除背景层Div
     document.getElementById("msgDiv").removeChild(title);//删除提示框的标题栏
     document.body.removeChild(msgObj);//删除提示框层
   }
   document.body.appendChild(msgObj);//在body内添加提示框div对象msgObj
   document.getElementById("msgDiv").appendChild(title);//在提示框div中添加标题栏对象title

   var txt=document.createElement("p");//创建一个p对象(提示框提示信息)
   //定义p的属性,即相当于
   //<p style="margin:1em 0;" id="msgTxt">测试效果</p>
   txt.style.margin="1em 0"
   txt.setAttribute("id","msgTxt");
   txt.innerHTML=str;//来源于函数调用时的参数值
   document.getElementById("msgDiv").appendChild(txt);//在提示框div中添加提示信息对象txt
   document.getElementById("msgDiv").appendChild(button);//在提示框div中添加按钮对象button
}
</script>


</body>
</html>

本文转载自: http://blog.163.com/zhouwuping_welcome@126/blog/static/584118682009101003613979/

wangrikui
粉丝 10
博文 31
码字总数 20614
作品 0
南京
后端工程师
私信 提问
android studio 如何设置代码提示

图上内容比较多,我直接按区域划分成6块区域来说吧: 区域1:这个选项是关于提示的时候如何进行匹配,即按照什么条件来进行提示内容的搜索。 All:选择这个的话,意思就是要和你输入的字符进行...

张裕轩
2017/04/25
0
0
Windows Phone 7 中的弹出窗口

由于目前的Silverlight for Windows Phone 中不支持ChildWindow,所以当我们想要弹出一些窗口时,只能自己想办法了。 第一种方法是MessageBox,相当的简单,当然你也可以给它加上一些样式。 ...

鉴客
2011/11/23
1K
0
使用UltraISO制作ubuntu安装u盘启动盘图文教程

制作U盘启动1.gif 1、首先打开UltraISO软件,尽量下载最新版的 http://www.cr173.com/soft/15480.html 2、点击工具栏中的第二个打开镜像文件工具,如图红色方框标志按钮,然后在打开的“打开...

胖先森
2017/09/07
0
0
【已解决】PyCharm证书过期

问题描述 今天打开PyCharm的时候弹出提示框 ,表示证书到期了,无法继续使用软件。之前使用的证书是在学校的时候注册的学生账号,也就是以结尾的账号。现在需要寻找一种新的认证方式。 解决方...

郗南枫
2018/04/29
0
0
Android实战之app版本更新升级全文章(二)

自从友盟关闭了版本更新功能后,安卓的版本更新只能自己来撸了,结合之前友盟的版本更新,其实实现起来也简单,这里简单说说版本更新实现的思路: 第一步,通过接口获取更新信息(版本号、更...

qq_27489007
2017/04/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

rime设置为默认简体

转载 https://github.com/ModerRAS/ModerRAS.github.io/blob/master/_posts/2018-11-07-rime%E8%AE%BE%E7%BD%AE%E4%B8%BA%E9%BB%98%E8%AE%A4%E7%AE%80%E4%BD%93.md 写在开始 我的Arch Linux上......

zhenruyan
今天
5
0
简述TCP的流量控制与拥塞控制

1. TCP流量控制 流量控制就是让发送方的发送速率不要太快,要让接收方来的及接收。 原理是通过确认报文中窗口字段来控制发送方的发送速率,发送方的发送窗口大小不能超过接收方给出窗口大小。...

鏡花水月
今天
10
0
OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
今天
1K
11
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部