`
- 浏览:
177224 次
- 性别:
- 来自:
北京
-
<html>
<head>
<title>标题</title>
<style>
.font_style{
style='FONT-FAMILY: '宋体';
FONT-SIZE: 10pt;'
}
</style>
<script type="text/javascript">
<!--
document.write("<style type=\"text/css\">*{padding:0; margin:0}.close{float:right;cursor:default}</style>")
function $(id){ return document.getElementById(id)}
function AlertMsg(title,content){
var msgw,msgh,msgbg,msgcolor,bordercolor,titlecolor,titlebg,con;
con = "<table style='margin:10px 15px 0px 15px; border:0;'>"+
"<tr><td style='border:0; line-height:22px; padding:3px 0; vertical-align:top;width:75%;text-align:center'>"+
"<img src='loading.gif'/></td>"+
"</tr>"+
"<tr><td style='border:0; line-height:22px; padding:3px 0; vertical-align:top;width:75%;text-align:center'>"+
"<span style='FONT-SIZE: 10pt'>数据处理中,请稍后...</span></td>"+
"</tr>"+
"</table>";
//弹出窗口设置
msgw = 210; //窗口宽度
msgh = 50; //窗口高度
msgbg = "#FFF"; //内容背景
msgcolor = "#000"; //内容颜色
bordercolor = "#000"; //边框颜色
titlecolor = "#FFF"; //标题颜色
titlebg = "#369"; //标题背景
//遮罩背景设置
var sWidth,sHeight;
sWidth = document.body.clientWidth;
sHeight = document.body.clientHeight;
//创建遮罩背景
var maskObj = document.createElement("div");
maskObj.setAttribute('id','maskdiv');
maskObj.style.position = "absolute";
maskObj.style.top = "0";
maskObj.style.left = "0";
maskObj.style.background = "#666";
maskObj.style.filter = "Alpha(opacity=20);";
maskObj.style.opacity = "0.3";
maskObj.style.width = sWidth + "px";
maskObj.style.height = sHeight + "px";
maskObj.style.zIndex = "10000";
document.body.appendChild(maskObj);
//创建弹出窗口
var msgObj = document.createElement("div")
msgObj.setAttribute("id","msgdiv");
msgObj.style.position ="absolute";
msgObj.style.top = (screen.availHeight - msgh) / 4 + "px";
msgObj.style.left = (screen.availWidth - msgw) / 2 + "px";
msgObj.style.width = msgw + "px";
msgObj.style.height = msgh + "px";
msgObj.style.fontSize = "12px";
msgObj.style.background = msgbg;
msgObj.style.border = "1px solid " + bordercolor;
msgObj.style.zIndex = "10001";
//创建标题
var thObj = document.createElement("div");
thObj.setAttribute("id","msgth");
thObj.className = "DragAble";
thObj.style.cursor = "move";
thObj.style.padding = "4px 6px";
thObj.style.color = titlecolor;
thObj.style.background = titlebg;
var titleStr = "<span>"+ title +"</span>";
thObj.innerHTML = titleStr;
//创建内容
var bodyObj = document.createElement("div");
bodyObj.setAttribute("id","msgbody");
bodyObj.style.padding = "10px";
bodyObj.style.lineHeight = "1.5em";
bodyObj.innerHTML = con;
var txt = document.createTextNode(content)
bodyObj.appendChild(txt);
//生成窗口
document.body.appendChild(msgObj);
$("msgdiv").appendChild(thObj);
$("msgdiv").appendChild(bodyObj);
}
function CloseMsg(){
//移除对象
document.body.removeChild($("maskdiv"));
$("msgdiv").removeChild($("msgth"));
$("msgdiv").removeChild($("msgbody"));
document.body.removeChild($("msgdiv"));
}
//拖动窗口
var ie = document.all;
var nn6 = document.getElementById&&!document.all;
var isdrag = false;
var y,x;
var oDragObj;
function moveMouse(e) {
if (isdrag) {
oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px";
oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px";
return false;
}
}
function initDrag(e) {
var oDragHandle = nn6 ? e.target : event.srcElement;
var topElement = "HTML";
while (oDragHandle.tagName != topElement && oDragHandle.className != "DragAble") {
oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
}
if (oDragHandle.className=="DragAble") {
isdrag = true;
oDragObj = oDragHandle.parentNode;
nTY = parseInt(oDragObj.style.top);
y = nn6 ? e.clientY : event.clientY;
nTX = parseInt(oDragObj.style.left);
x = nn6 ? e.clientX : event.clientX;
document.onmousemove = moveMouse;
return false;
}
}
document.onmousedown = initDrag;
document.onmouseup = new Function("isdrag=false");
//-->
</script>
</head>
<body>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="100" align="center">
<p><a href="javascript:AlertMsg("温馨提示",'')">点我试试吧!</a></p></td>
</tr>
</table>
</div>
</body>
</html>
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
自定义弹出框样式 alert修改 根据需要修改弹出框样式
js jquery alert样式
可以自己定义样式、自定义宽高、自定义按钮文字的模拟alert和confirm
flex中Alert是很常用的,该源码主要是对Alert的样式设置。
alert和confirm弹出框样式美化,可自定义颜色和样式,无须调用浏览器自带弹框。
alert和confirm弹出框样式美化,可自定义颜色和样式,无须调用浏览器自带弹框。
alert提示框(多种样式), 和大家分享了
简单的自定义alert样式,可自定义弹出对话框背景颜色,以及大小
Jquery样式化Alert,Confirm,Prompt窗口.
alert及confirm弹出框样式,换不错
重写alert,confirm 提示框样式
博客:《好看的alert弹窗或样式弹窗》文章中所涉及到js和css
自定义样式的alert,confirm窗口,可连续弹窗
SweetAlert2弹出消息...再献上一个相关的带6种风格样式SweetAlert弹出对话框插件:http://www.sucaihuo.com/js/190.html 调用js库 <script src="lib/jquery-2.1.1.min.js" type="text/javascript"></script> ...
可以自己定义遮罩层的样式和Alert弹出框的样式
js 精美弹出框 alert 可以设置样式,取代传统丑陋的alert弹出框
自己写了个alert提示框。因为系统alert在苹果手机微信中,提示时,顶部会显示网站地址。 同时其他后续操作需要在js中继续填写。因此简单用div写了一个alert提示框,并自动关闭。 效果图 css样式 /*弹出消息对话框...
好看的 弹框 遮罩层 alert 刷心样式 的
js alert confirm样式弹出框是一款根据alert confirm优化样式的确认对话框代码。
alert弹出窗口美化,支持html代码和样式等的操作。