<!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. C#应用视频教程2.1 OPENGL虚拟仿真介绍

    OPENGL的虚拟仿真对于工控自动化的意义很大,虽然市面上有很多的第三方软件比如Solidworks,Mathlab,ProE等等软件可以做仿真,而且能够实现的功能包括了流体分析,力学分析,摩擦力分析 ...

  2. .NET破解之爱奇迪（一）

    今天无意中看到了wuhuacong(伍华聪)的专栏,界面写得还是很炫的感觉,于是在广州爱奇迪官网下载一个来试一下——客户关系管理系统.下面是成果: 00.总体把握 里面有Logon窗口(为什么不是Lo ...

  3. CAS lock-free

    转:http://www.cnblogs.com/lucifer1982/archive/2009/04/08/1431992.html http://en.wikipedia.org/wiki/Co ...

  4. iOS 图片比例缩放

    方法 //Resize image - (UIImage *)resizeImage:(UIImage *)image withQuality:(CGInterpolationQuality)qual ...

  5. 算法笔记_036:预排序（Java）

    目录 1 问题描述 2 解决方案 2.1 检验数组中元素的唯一性 2.2 模式计算   1 问题描述 在计算机科学中,预排序是一种很古老的思想.实际上,对于排序算法的兴趣很大程度上是因为这样一个事实: ...

  6. Android －BLE蓝牙小DEMO

    代码地址如下:http://www.demodashi.com/demo/13890.html 原文地址: https://blog.csdn.net/vnanyesheshou/article/de ...

  7. Python 字符串与数字拼接报错

    Python 不像 JS 或者 PHP 这种弱类型语言里在字符串连接时会自动转换类型,而是直接报错. 如: 上述是Python 字符串与数字拼接报错,解决办法是:使用bytes函数把int型转换为st ...

  8. solr 查询参数说明

    solr 查询参数说明

  9. Redis总结（六）Redis配置文件全解(转载)

    前面已经写了一些关于redis 的介绍,redis 的基本功能和用法,基本上都说了,有问题的可以去看看 http://www.cnblogs.com/zhangweizhong/category/77 ...

  10. EMQ 学习---MQTT消息QoS

    MQTT发布消息QoS保证不是端到端的,是客户端与服务器之间的.订阅者收到MQTT消息的QoS级别,最终取决于发布消息的QoS和主题订阅的QoS. 客户端连接: 客户端完成TCP三次握手之后,还需要发 ...