<!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. Openstack Mitaka 负载均衡 LoadBalancerv2

    ​ 最近研究了一下Openstack负载均衡,yum源和源码级别的安装都尝试成功了.网上有很多文章都是LoadBalancerv1,这个已经被放弃了.所以写一下自己是如何使用LoadBalancerv ...

  2. Apache Samza流处理框架介绍——kafka+LevelDB的Key/Value数据库来存储历史消息+？

    转自:http://www.infoq.com/cn/news/2015/02/apache-samza-top-project Apache Samza是一个开源.分布式的流处理框架,它使用开源分布 ...

  3. 【.Net】Socket小示例

    引言 项目中用到了Socket,这里做个控制台小示例记录一下. Client 客户端的Receive用了异步方法,保持长连接,可以随时发送消息和响应服务端的消息,如下 static string Cl ...

  4. android实现log日志输出

    1.下载android的log4j的库(的封装) 去: http://code.google.com/p/android-logging-log4j/ 下载对应的 android-logging-lo ...

  5. 关于HashMap，HashTable，HashSet浅析

    首先,最重要的,HashMap  作为一个我们使用非常多的集合.最常被大家认知的是,它是一个key-value形式存储数据的数据结构,可以实现快速的存,取操作.  关于HashMap的源码,我们截取一 ...

  6. 深入理解UE4宏定义—— GENERATED_BODY

    本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/72834164 作者:car ...

  7. transition 总结

    详情:http://www.css88.com/book/css/properties/transition/transition-property.htm left不能进行transition

  8. Asphyre Sphinx is a cross-platform framework for developing 2D/3D video games and interactive business applications

    Introduction Introduction Asphyre Sphinx is a cross-platform framework for developing 2D/3D video ga ...

  9. CIL

    CIL 学习 http://www.cnblogs.com/chengxingliang/category/306943.html

  10. 关于Sublime Text不能在打开方式中显示并且不能被设置成默认打开方式的问题

    解决方法: 1. Windows 输入 regedit 后 回车 打开注册表 2.找到 "HKEY_CLASSES_ROOT\Applications\sublime_text.exe\sh ...