<!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. 用thinkphp执行原生sql

    Controller代码: Demo2Controller.class.php <?php namespace Home\Controller; use Think\Controller; us ...

  2. UNIX网络编程读书笔记：原始套接口

    概述 应用程序可以绕过传输层而直接使用IPv4和IPv6,这称为原始套接口(raw socket).http://www.cnblogs.com/nufangrensheng/p/3583435.ht ...

  3. Python 更新set

    更新set 由于set存储的是一组不重复的无序元素,因此,更新set主要做两件事: 一是把新的元素添加到set中,二是把已有元素从set中删除. 添加元素时,用set的add()方法: weekday ...

  4. shiny安装使用入门

    下载最新版R(至少3.2.5版本),在CRAN上下载: 打开R install.packages("shiny")#安装shiny包 library(shiny)#如果出现warn ...

  5. CSS命名规范 BEM

    良好的代码结构,HTML和css元素之间的关系,对于项目交付是很重要的! BEM解释: (1).block 是BEM的区块(B),包含内容和风格.如bootstrap框架的.container. (2 ...

  6. Oracle 角色、权限

    Oracle 角色管理 一.何为角色     角色:角色是一组权限的集合,将角色赋给一个用户,这个用户就拥有了这个角色中的所有权限.二.系统预定义角色 预定义角色是在数据库安装后,系统自动创建的一些常 ...

  7. 【LeetCode】68. Text Justification

    Text Justification Given an array of words and a length L, format the text such that each line has e ...

  8. 如何成为一位黑客 ( How To Become A Hacker )

    http://blog.csdn.net/jarodlau/article/details/337891 How To Become A Hacker 如何成为一位黑客(转载) 这真是一个好问题,不止 ...

  9. TypeError: can't convert console.log(...) to primitive type

    一.背景 火狐浏览器提示这个错误,谷歌没有. 二.出错代码 var eventHandlers = { 'succeeded': function(e){ console.log('send succ ...

  10. numpy.argmin 使用

    https://docs.scipy.org/doc/numpy-1.10.1/reference/generated/numpy.argmin.html numpy.argmin(a, axis=N ...