`
kingmxj
  • 浏览: 187051 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

样式alert

IEHTML 
阅读更多
<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(&quot;温馨提示&quot;,'')">点我试试吧!</a></p></td>
</tr>
</table>
</div>
</body>
</html>
分享到：
| input file的另类做法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    自定义弹出框样式 alert修改

    ### 自定义弹出框样式 alert修改 在网页开发过程中，我们经常会遇到需要向用户展示提示信息的情况。传统的JavaScript `alert`方法虽然简单易用，但其样式固定且无法自定义，这在追求用户体验和界面美观的现代Web...

    jquery 改写Alert弹出框样式

    "jquery 改写Alert弹出框样式"的主题就围绕着如何使用jQuery来扩展或改变`alert()`函数默认的样式。 首先，让我们理解`alert()`的基本用法。在JavaScript中，`alert(message)`会打开一个包含指定消息的系统对话框，...

    alert提示框(多种样式)

    本文将详细介绍各种样式的alert提示框及其应用，并提供几个相关的资源文件。 传统的JavaScript `alert()` 函数生成的是一个基本的、无法自定义样式的对话框，包含一个消息文本和一个“确定”按钮。然而，在现代Web...

    自定义样式弹框alert和confirm

    为了提供更个性化的用户体验，开发者经常需要创建自定义的弹框，即模拟`alert`和`confirm`功能，同时允许自定义样式、尺寸和按钮文本。下面将详细探讨如何实现这一目标。 首先，我们需要理解`alert`和`confirm`的...

    flex的Alert样式设置

    这里我们关注的是“flex的Alert样式设置”，这涉及到如何自定义和美化在Flex应用程序中显示的警告对话框（Alert）。 Alert对话框在Flex中是一种基本的UI组件，用于向用户展示信息、询问问题或确认操作。默认情况下...

    自定义alert样式

    默认情况下，Alert对话框具有固定的样式，但开发者常常希望对其进行个性化定制，以符合网站的整体设计风格。本教程将详细介绍如何在JavaScript中自定义Alert样式的实践方法。 首先，我们要明白，由于JavaScript的...

    alert和confirm弹出框样式美化

    本教程将介绍如何通过自定义CSS和JavaScript来美化`alert`和`confirm`弹出框，实现更个性化的界面效果，而无需依赖浏览器的默认样式。 首先，我们不再直接使用`window.alert()`和`window.confirm()`方法，而是创建...

    alert和confirm弹出框样式美化.zip

    标题“alert和confirm弹出框样式美化.zip”提示我们这个压缩包包含的是关于如何自定义和美化`alert`和`confirm`弹出框的内容，使它们更加符合网页的整体设计风格。 描述中提到，这个资源可以让我们自定义弹出框的...

    alert及confirm弹出框样式，换不错

    然而，`alert` 和 `confirm` 的默认样式往往无法满足所有设计需求，尤其是对于追求个性化用户体验的现代网页。在给定的资源中，我们看到有 `index.html`、`css` 和 `js` 文件，这表明开发者可能已经实现了自定义的...

    Jquery样式化Alert

    "Jquery样式化Alert"是指利用jQuery扩展默认浏览器的alert、confirm和prompt对话框，以提供更加美观和定制化的用户体验。这些基本的对话框在原生JavaScript中功能简单且样式单一，而通过jQuery，我们可以创建具有...

    博客：《好看的alert弹窗或样式弹窗》文章中所涉及到js和css

    在本文中，我们将深入探讨博客《好看的alert弹窗或样式弹窗》中涉及的JavaScript（js）和CSS（css）技术，以及如何通过它们来创建美观且功能丰富的自定义弹窗。 首先，我们来看看`alertcss.css`。这个文件很显然是...

    alert_style.zip_alert样式美化_style

    "alert_style.zip_alert样式美化_style"这个资源显然关注于提升应用程序或网站中的警告提示（alert）的视觉效果。Alert弹出窗口通常用于通知用户关键信息或者需要用户确认的操作，因此，它们的样式设计必须既吸引人...

    自定义样式的alert,confirm窗口

    自定义样式的alert,confirm窗口,可连续弹窗

    自定义替换系统alert（几十个样式）

    3. `好例子网_弹框.zip`、`alert.zip`、`js_alert_confirm_ystck(jb51.net).rar`、`jiaoben3281.rar`、`各种弹出框样式.zip`、`js_alert_confirm_ystck(jb51.net) (1).rar`：这些都是不同来源的自定义`alert`和`...

    重写alert，confirm 提示框样式

    重写alert，confirm 提示框样式

    js 精美弹出框 alert

    在JavaScript编程中，"js精美弹出框alert"是指通过自定义的方式，创建美观且功能丰富的弹出警告对话框，以替代系统默认的简单且样式单一的`alert()`函数。通常，开发者会使用CSS和JavaScript库来实现这种效果，以...

    alert弹窗样式

    在网页设计和开发中，"alert弹窗样式"是一个重要的元素，它涉及到用户与网站的交互体验。传统的JavaScript alert函数虽然能实现简单的信息提示，但其样式单一且无法自定义，往往不能满足现代网页设计的需求。为了...

    自定义遮罩和Alert弹出框样式

    在前端开发中，用户界面的交互性和美观性是至关重要的，而自定义遮罩和Alert弹出框样式正是实现这一目标的关键技术。本文将深入探讨这两个主题，帮助开发者提升其应用的用户体验。 首先，我们来了解遮罩层（Mask）...

    SweetAlert2弹出消息对话框插件

    SweetAlert2弹出消息...再献上一个相关的带6种风格样式SweetAlert弹出对话框插件：http://www.sucaihuo.com/js/190.html 调用js库 &lt;script src="lib/jquery-2.1.1.min.js" type="text/javascript"&gt;&lt;/script&gt; ...

    js提示框替代系统alert,自动关闭alert对话框的实现方法

    自己写了个alert提示框。因为系统alert在苹果手机微信中，提示时，顶部会显示网站地址。 同时其他后续操作需要在js中继续填写。因此简单用div写了一个alert提示框，并自动关闭。 效果图 css样式 /*弹出消息对话框...

Magicbox
Global site tag (gtag.js) - Google Analytics