<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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" />
   <meta http-equiv="Content-Language" content="gb2312" />
   <meta name="KeyWords" content="Alert弹出窗口 美化体验版 HTML网" />
   <meta name="description" content="Alert弹出窗口 美化体验版 HTML网" />
   <style type="text/css">
      *{
          margin:0;padding:0;
      }
   </style>
</head>
<body>
<div class="cecmbody" id="cecmpolicy">
   <div class="leftClass">
            <br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
    <input type="button" value="点击这里" onclick="sAlert('测试效果');" />
  
   </div>
   <div class="rightClass">
   </div> 
</div>
     <script type="text/javascript" language="javascript">
    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.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>
</body>
</html>
 
 

alert的美化的更多相关文章

  1. Yii2的相关学习记录,alert等美化、confirm异步、session中的flash及小部件的使用(六)

    呃,系统自带的alert.confirm等弹出框实在是难看,作为一个颜控,这能忍? 这里我用的是kartik-v/yii2-dialog,这个是基于bootstrap3-dialog这个来做了一些常用 ...

  2. 弹出框美化 alert样式美化

    引用style.css和ui.js就可以直接用以下接口调用!(文末附完整代码) alert_带标题: mizhu.alert('alert_带标题', '这是alert效果'); alert_带图标: ...

  3. alert的美化,并且随滚动条滚动

    onclick="sAlert('${vo.courseName}');" <script type="text/javascript" language ...

  4. js的alert和confirm美化

    --前言-- window对象的alert和confirm标准方法在不同浏览器的显示效果不太相同,有个相同点是都不是很美观.我们的想法是使用js和css分别仿照它们,提供另一套函数,使在不同浏览器的有 ...

  5. 复利计算器(4)——jQuery界面美化、自动补全

    一.分工 这次终于可以跟小伙伴合作了,经过讨论,我负责界面的美化和输入框自动补全,小伙伴擅长安卓,于是将复利计算器弄成app的任务就交给了小伙伴.为了我们两人团队,我们都好奋斗哈哈哈!! 二.界面美化 ...

  6. css3 半个字符美化方法

    <html lang="zh-CN"> <head> <title></title> <meta charset=" ...

  7. BootStrapt iCheck表单美化插件使用方法详解(含参数、事件等) 全选 反选

    特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备 2.支持触摸设备 — iOS.Android.BlackBerry.Windows Phone等系统 4.方便 ...

  8. iCheck表单美化插件使用方法详解(含参数、事件等)

    iCheck   特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 - 包括 桌面和移动设备 2.支持触摸设备 - iOS.Android.BlackBerry.Windows Phon ...

  9. JSON格式化 JSON美化 输出到html

    {"promotion_details":{"promotion_detail":[{"discount_fee":"22.20& ...

随机推荐

  1. vue - 页面跳转

    HTML:a 小程序:navigator Vue:router-link 1. router-link => a标签 2. javascript标签跳转页面 2.1   2.2 3. 常用方法之 ...

  2. java 和 C# 响应输出的相似度

    java servlet response: bf.append("Shipment No, STT No, WIN Event, DateTime, WOU Envent, DateTim ...

  3. OE context 传参数

    来自:http://shine-it.net/index.php/topic,16360.0.html 有个需求想many2one字段关联显示的value在各个模块显示不同的值. 如果直接该rel_n ...

  4. ubuntu server激活即时通讯IM服务 Instant Messaging is not activated on this server

    转自:http://shine-it.net/index.php/topic,16469.msg28364.html ubuntu server 下 odoo激活及时通讯功能im OpenERP IM ...

  5. KVM虚拟化学习笔记系列文章列表(转)

    Kernel-based Virtual Machine KVM虚拟化学习笔记系列文章列表----------------------------------------kvm虚拟化学习笔记(一)之k ...

  6. vsCode 添加浏览器调试和js调试的方法总结

    vsCode 添加浏览器调试和js调试的方法 1.直接按F5可以调试的方法或者点击运行按钮(可以直接运行html文件或者js文件) 在launch.json文件中的配置如下: {     " ...

  7. 用Visual studio2012在Windows8上开发内核驱动监视线程创建

    在Windows NT中,80386保护模式的“保护”比Windows 95中更坚固,这个“镀金的笼子”更加结实,更加难以打破.在Windows 95中,至少应用程序I/O操作是不受限制的,而在Win ...

  8. CentOS 5.4 安装和卸载桌面

    显示系统已经安装的组件,和可以安装的组件:#yum grouplist 如果系统安装之初采用最小化安装,没有安装xwindow,那么先安装:#yum groupinstall "X Wind ...

  9. Sql UNION 合并多个结果集并排序

    1.建表语句及测试数据: --创建表A CREATE TABLE A( A1 int NULL, A2 nvArchAr(50) NULL, A3 decimAl(18, 0) NULL ) --测试 ...

  10. JUC组件扩展(三):BlockingQueue(阻塞队列)详解

    一. 前言 在新增的Concurrent包中,BlockingQueue很好的解决了多线程中,如何高效安全“传输”数据的问题.通过这些高效并且线程安全的队列类,为我们快速搭建高质量的多线程程序带来极大 ...