<!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 1287 线段树

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1287 简单的线段树题目,直接写个二分查找大于等于x的最小位置就好了. # ...

  2. language model ——tensorflow 之RNN

    代码结构 tf的代码看多了之后就知道其实官方代码的这个结构并不好: graph的构建和训练部分放在了一个文件中,至少也应该分开成model.py和train.py两个文件,model.py中只有一个P ...

  3. Codeforces Round #394 (Div. 2) B. Dasha and friends

    B. Dasha and friends time limit per test:2 seconds memory limit per test:256 megabytes input:standar ...

  4. 2017.11.23 display fun --STM8

    unsigned char disp_mode;unsigned char disp_last_mode;unsigned char disp_sub_mode;unsigned char disp_ ...

  5. Qt之格栅布局（QGridLayout）

    简述 QGridLayout:格栅布局,也被称作网格布局(多行多列). 栅格布局将位于其中的窗口部件放入一个网状的栅格之中.QGridLayout需要将提供给它的空间划分成的行和列,并把每个窗口部件插 ...

  6. CollectionUtils工具类使用指南

    CollectionUtils提供很多对集合的操作方法,常用的方法如下:(参考文章:http://www.open-open.com/code/view/1420470842125) import o ...

  7. vue动态 设置类名

    <div class="tab"> <navigator :class="currentTab=='mzfw'?'nav active': 'nav'& ...

  8. （四）canvas绘制路径

    save() 样式不受污染的起始范围 shadowOffsetX 阴影x轴的距离 shadowOffsetY 阴影y轴的距离 shadowBlur 模糊度 shadowColor 阴影颜色 resto ...

  9. c++使用http协议上传文件到七牛云服务器

    使用c++ http协议上传文件到七牛服务器时,比较搞的一点就是header的设置: "Content-Type:multipart/form-data;boundary=xxx" ...

  10. flash游戏服务器安全策略

     在网页游戏开发中,绝大多数即时通信游戏采用flash+socket 模式来作为消息数据传递.在开发过程中大多数开发者在开发过程中本地没有问题,但是一旦部署到了网络,就存在连接上socket服务器.究 ...