点击按钮Alert弹出遮罩层效果的提示框代码_nanjing0412的博客-程序员秘密

点击按钮Alert弹出遮罩层效果的提示框代码，改善优化的Alert弹出提示效果，类似于新浪邮箱的提示效果。比较独立。在wenming版主的帮助下，已解决了高度不能适应的BUG。使用方法很简单，在需要弹出提示的页面调用即可，示例中有方法。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<title>经过改善优化的Alert弹出提示效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
*{
margin:0;padding:0;
}
</style>
</head>
<body>
<div class="cecmbody" id="cecmpolicy">
<div class="leftClass">
<p>测试</p><p>测试</p>
<p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p>
<p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p>
<input type="button" value="点击这里" οnclick="sAlert('测试效果');" />
</div>
<div class="rightClass">
</div>
</div>
<script type="text/javascript" language="javascript">
//Author:Daviv
//Blog:http://blog.163.com/jxdawei
//Date:2006-10-27
//Email:[email protected]
//Demo:http://www.veryhuo.com/a/view/38279.html
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.οnclick=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> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>

本文链接：https://blog.csdn.net/nanjing0412/article/details/60961951

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

一种新的敏捷开发回顾会方法_回顾会怎么让开发开口说话_袁三丰的博客-程序员秘密

scrum中回顾会是非常重要的活动，往往出现无法开诚布公，要么开成了和谐会，要么开成了批斗会，下面介绍一种新方法，希望能对大家有帮助。1. 每个人在一张纸片上回答3个问题；2. 每个人写好后顺/逆时针交给最近的同事；3. 如果同意纸片上的回答画一笔正字；4. 每张纸片被所有人打过分数后大家亮出自己的纸片；5. 得正字最多的几条纸片优先被讨论成为action plan。...

入门到卸载：Anaconda3安装与Python3.8.1兼容配置_python3.8.1对应anacon_冰苏打的博客-程序员秘密

第一天接触Anaconda学习到的使用经验。仅适合入门。

JQuery插件searchSelect_fengguowusheng的博客-程序员秘密

1.简介searchSelect是模拟select下拉列表组件的插件，支持通过键盘输入字符来过滤下拉列表选项。 2.更改内容1）不再使用jQuery插件slimscroll。2）修改jQuery的事件注册机制，使之支持低版本的jQuery。3）隐藏原select组件。4）使用jquery插件bgiframe使下拉列表在IE6中不被其它select组件穿越。5...

关于hibernate5针对各数据库hibernate.hbm2ddl.auto=update 的天坑_小疯疯子的博客-程序员秘密

关于hibernate5针对各数据库hibernate.hbm2ddl.auto=update 的天坑在使用Hibernate的时候我们一般都会配置hibernate.hbm2ddl.auto这个属性，而其中的常见的属性值包括：createcreate-dropvalidateupdate而在使用的过程中，update是我用的比较多的，由于官方文档对于这个属性产生的效果和使用...

C语言回文素数_学代码，码代码的博客-程序员秘密

回文素数（4分）题目内容：所谓回文素数是指对一个素数n，从左到右和从右到左读是相同的，这样的数就称为回文素数，例如11，101，313等。编程计算并输出不超过n（100&lt;=n&lt;1000）的回文素数，并统计这些回文素数的个数，其中n的值从键盘输入。程序运行示例1Input n:10011count=1程序运行示例2Input n:100011 101 131 1...

EIP1559协议争议几何_miner_D的博客-程序员秘密

以太坊矿工以往的收益主要由两部分组成：新增区块奖励+交易手续费而在EIP1559提案中，交易者支付的交易手续费将被拆分为两部分：基础费+矿工费。其中基础费将被销毁，不再支付给矿工EIP-1559协议旨在解决两个问题1、确定包含区块Block Inclusion 的“市场汇率”；2、销毁交易费中的大部分代币ETH。那为什么要销毁ETH交易费用其实销毁ETH主要有以下两方面的作用：1、给以太坊的供应提供了通缩机制，这能增加以太坊的稀缺性和长期安全性；2、让所有以太坊持有者受益..