<!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>

<meta name="verify-v1" content="P4T6fFCiPVxqMWZ2eztyXVzMHlnwD0wLQOq6LBHN5Y8=" />

<title>JS实现Alert弹出层 背景变暗丨芯晴网页特效丨CsrCode.Cn</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css">

    *{

       margin:0;padding:0;

   }

</style>

</head>

<body>

<div class="cecmbody" id="cecmpolicy">

<div class="leftClass">

<p>点击下面按钮预览</p>

<input type="button" value="点击这里" onclick="sAlert('欢迎光临：芯晴网页特效丨www.CsrCode.cn');" />

  </div>

  <div class="rightClass">

  </div>

 </div>

<script type="text/javascript" language="javascript">

//Author:Daviv

//Blog:http://blog.163.com/jxdawei

//Date:2006-10-27

//Email:jxdawei@gmail.com

   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>

<br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：源码爱好者</font></p>

简单 JS 弹出层 背景变暗的更多相关文章

  1. JS弹出层制作，以及移动端禁止弹出层下内容滚动，overflow:hidden移动端失效问题

    HTML <div class="layer"> <div class="menu-list"> <span>社会</ ...

  2. js弹出层

    js弹出层 1.div附近显示 <div id="message"></div> $().delay().hide(); 2.遮罩层 表单提交后遮住页面,等 ...

  3. JS弹出层遮罩,隐藏背景页面滚动条细节优化

    做过弹层组件的童鞋应该都考虑过特殊情况下取消页面滚动条,让其不能滚动,这样用户体验会好很多,当弹层内容超出屏幕展现范围的时候在弹层上面增加滚动条来查看全部内容. 一.去除滚动条方法给body添加ove ...

  4. js 弹出层，以及在javascript里定义层样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. jquery.blockUI.2.31.js 弹出层项目介绍

    {insert_scripts files='user.js'} <style type="text/css"> #float_login{border:1px sol ...

  6. div+js 弹出层

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  7. PopupWindow 弹出时背景变暗

    下面的PopupWindow  的高是相对于屏幕高设计,宽是获取的某一个控件的宽设置,位置位于某控件的上方,红色部分是设置弹出时屏幕变暗的. //设置contentView View contentV ...

  8. layUI 几个简单的弹出层

    导入控件主题 <link rel="stylesheet" href="dist/themes/default/style.min.css" /> ...

  9. 在Vue中使用layer.js弹出层插件

    layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue ...

随机推荐

  1. 51nod 1639 递推

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1639 1639 绑鞋带 基准时间限制:1 秒 空间限制:131072 K ...

  2. 【scala】应用程序和App特性

    一.应用程序 要运行一个Scala对象,必须提供一个独立对象的名称.这个独立对象需要包含一个main方法,该方法接受一个Array[String]作为参数,结果类型为Unit. import Chec ...

  3. C/C++开发android应用

    (转自:http://blog.csdn.net/srplab1/article/details/7617963) 在某些情况下,比如原来与很多c/c++的代码, 可能希望采用c/c++编写andro ...

  4. 关于 SimpleDateFormat 的非线程安全问题及其解决方案

    一直以来都是直接用SimpleDateFormat开发的,没想着考虑线程安全的问题,特记录下来(摘抄的): 1.问题: 先来看一段可能引起错误的代码: package test.date; impor ...

  5. 【机器学习基石笔记】七、vc Dimension

    vc demension定义: breakPoint - 1 N > vc dimension, 任意的N个,就不能任意划分 N <= vc dimension,存在N个,可以任意划分 只 ...

  6. PostgreSQL.conf文件配置详解［转］

    一.连接配置与安全认证 1.连接Connection Settings   listen_addresses (string) 这个参数只有在启动数据库时,才能被设置.它指定数据库用来监听客户端连接的 ...

  7. HTML中的颜色简写

    1.HTML中颜色的五种写法 1)直接用颜色英文名字表示 例如表示背景颜色为白色: 2.通过16进制数表示 例如表示背景颜色为黑色 3).通过RGB方式表示 RGB:是红色(red)绿色(green) ...

  8. 自定义View实战--实现一个清新美观的加载按钮

    本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布 在 Dribble 上偶然看到了一组交互如下: 当时在心里问自己能不能做,答案肯定是能做的,不过我比较懒,觉得中间那个伸缩变化要编写 ...

  9. 深入Guerrilla Games解密次世代开山大作《杀戮地带暗影坠落》（The technology of Killzone Shadow Fall）

    文章摘要:这几天终于有时间,把全文翻译完了,自己感觉不是太满意,不过大家能看懂就好,就当一个学习的机会.整篇文章通过SONY第一方游戏工作室Guerrilla Games主创的语录,为我们展现了次世代 ...

  10. 看过自会理解, Photon Server 常见概念分析.

    http://stackoverflow.com/questions/10823915/photon-server-newbie-questions/11653419#11653419 Channel ...