<!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. Flexible实现H5页面的rem布局适配

    1.https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html (使用Flexible实现手淘H5页面的终端适配) 2.http ...

  2. 开源分布式版本控制工具 —— Git 之旅

    Git 主张的分布式代码库与文件快照的设计思想,相对于传统 CVS.SVN 等集中式.文件差异式版本控制工具是一种挑战与颠覆.Git 带来了离线提交.轻量级分支等诸多便利.不过,也有人质疑 Git 的 ...

  3. Centos6.8 Jetty 安装配置

    ssh root@IP Password------------------------------------------------------------------------------↑登 ...

  4. SpringCloud教程 | 第九篇: 服务链路追踪(Spring Cloud Sleuth)

    版权声明:本文为博主原创文章,欢迎转载,转载请注明作者.原文超链接 ,博主地址:http://blog.csdn.net/forezp. http://blog.csdn.net/forezp/art ...

  5. 2017.11.7 Python 制作EFM32/ AVR批量烧录工具

    Customer need program quickly asap. ok,I need to set up a table for test. 1 reference data http://ww ...

  6. JavaScript遍历树结构

    遍历 function parseTreeJson(treeNodes){ if(!treeNodes||!treeNodes.length)return; for(let i=0;i<tree ...

  7. PostgreSQL 全文检索

    PostgreSQL 8.3.1  全文检索(转) 在postgreSQL 8.3自带支持全文检索功能,在之前的版本中需要安装配置tsearch2才能使用,安转配置tsearch2就不再多说了,主要介 ...

  8. android开发之eclipse调试debug模式详解

     之前我写了一个相关的帖子,但是今天看了一个还是写的比我详细,于是我拿过来和大家分享. 1.在程序中添加一个断点 如果所示:在Eclipse中添加了一个程序断点 在Eclipse中一共有三种添加断 ...

  9. android官网被封掉了，只好用这个网站进谷歌了！嘎嘎

         http://developer.android.com/sdk/index.html    这个可以进去,但是必须是搜狐 .360,uc都不用特意FQ     http://173.1 ...

  10. SharedPreference作用及数据操作模式

    SharedPreference是Android平台上的一个轻量级的存储类,用来保存应用的一些常用配制,比如Activity状态,Activtiy暂停,将此Activity的状态保存到SharedPr ...