<!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. Linux ${} 变量内容的提取和替换功能等

    [root@localhost log]# var=/dir1/dir2/file.txt 1.对变量取值 [root@localhost log]# echo ${var} /dir1/dir2/f ...

  2. 15个重要Python面试题 测测你适不适合做Python？

    http://nooverfit.com/wp/15%E4%B8%AA%E9%87%8D%E8%A6%81python%E9%9D%A2%E8%AF%95%E9%A2%98-%E6%B5%8B%E6% ...

  3. SQL语法 之 基本查询

    一.语法结构 SELECT select_list [ INTO new_table ] FROM table_source [ WHERE search_condition ] [ GROUP BY ...

  4. HDU 1595 find the longest of the shortest【次短路】

    转载请注明出处:http://blog.csdn.net/a1dark 分析:经典的次短路问题.dijkstra或者SPFA都能做.先找出最短路.然后依次删掉没条边.为何正确就不证明了.了解思想直接A ...

  5. iOS 检查app版本更新操作

    iOS 检查app版本更新操作 1:获取本地安装的版本信息: [NSString stringWithFormat:@"Version %@ (%@)", [[[NSBundle ...

  6. SpringMVC中使用-sqljdbc4.jar

    昨天将现在写的Web项目中的数据库由MySQL换成SQLServer,昨天想把MySQL重新安装一下,但是由于不明原因,导致无法安装. 卸载MySQL.删除安装文件.删除注册表.重启电脑.但是安装的时 ...

  7. linux 挂载 ISO 文件

    sudo sudo mount -o loop SUSE-Linux-10.1-GM-DVD-x86_64.iso /media/cdrom/ sudo umount /media/cdrom

  8. 查看tomcat启动文件都干点啥

    以下所写的都是基于Windows 操作系统,tomcat7.0版本.一直在使用tomcat但是老实说对于tomcat本身并没有一个系统的掌握,今天饶有兴致的随便看了看,做了一点笔记,写一点心得,我本人 ...

  9. ubuntu 命令行下查看网页 w3m

    w3m localhost/index.php

  10. Linux 设置IP，gate, 以及自动获取IP的方法

    一.使用命令设置ubuntu的ip地址 1.修改配置文件blacklist.conf禁用IPV6: sudo vi /etc/modprobe.d/blacklist.conf 2.在文档最后添加 b ...