<!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. 国外DDoS产品的一些调研—— Akamai Arbor Networks Cloudflare DOSarrest F5 Fastly Imperva Link11 Neustar Nexusguard Oracle (Dyn) Radware Verisign

    Global DDoS Threat LandscapeQ4 2017 https://www.incapsula.com/ddos-report/ddos-report-q4-2017.html,D ...

  2. git合并分支与解决冲突

    前提: 当前开发的分支为feature/20161129_317606_algoplatform_1,由于feature/20161130_322574_tmstools_1分支有新内容,所以准备将f ...

  3. Arcgis for javascript不同的状态下自定义鼠标样式

    俗话说:爱美之心,人皆有之.是的,没错,即使我只是一个做地图的,我也希望自己的地图看起来好看一点.在本文,给大家讲讲在Arcgis for javascript下如何自定义鼠标样式. 首先,说几个状态 ...

  4. 《Ubuntu入门基础》第三篇

    创建虚拟磁盘

  5. terminal小工具

    计算器 >bc >quit 显示日历 >cal

  6. BaseCommand

    import java.io.Serializable; import android.util.Log; public class BaseCommand implements Serializab ...

  7. Lua编程

    lua编程大杂烩.博客其他方面也不错.先记录.http://www.cnblogs.com/stephen-liu74/category/360139.html

  8. Windows Server 2008用IIS部署FTP简述

    1.安装IIS 2.在IIS中勾选FTP选项 3. 新建FTP站点

  9. 关于Spring框架你解多少？

    类似于谈谈你对Spring的了解的题目,在很多面试中都会被提到的. Spring,英文意思是春天的意思.在java的世界里,Spring是一个现时非常流行的开源应用框架. Spring 框架是一个分层 ...

  10. Linux常用命令(个人使用频率较高)

    1,日志查看 tail(cat) -f|grep ERROR(任意字符) filepath (任意行数) -f|grep ERROR(任意字符) filepath 2,查看目录&授权 file ...