一个简单的图片悬浮窗，点击可关闭

作者: zms! 日期: 2015.05.02 本文发布于1793天前 分类: 前端琐碎DIV/CSS/JS 相关：

#btnClose{ cursor:pointer;font-family:Arial;background-color:#000;border-radius:50%;width:20px;height:20px;line-height:20px;text-align:center;position:absolute;margin-right:-5px;}
#BgDiv{background-color:#000; position:absolute; z-index:99; left:0; top:0; display:none; width:100%; height:100%;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}
#DialogDiv{position:fixed;width:805px; left:50%; top:50px; margin-left:-400px; height:auto; z-index:100;background-color:#fff; border:1px #ccc solid; padding:1px; overflow:hidden;}
#DialogDiv h2{ height:25px; font-size:14px; position:relative; padding-left:10px; line-height:25px; color:#FFFFFF;}
#DialogDiv h2 a{position:absolute; right:5px; font-size:12px; color:#fff}#btnShow{ padding:3px;}

document.writeln("<div id=\"BgDiv\"></div><div id=\"DialogDiv\"><h2><span id=\"cctv\"></span><a  id=\"btnClose\">X</a></h2><img src=\"http://www.maholl.com/zpic/2014/08/vkTzPA0.jpg\"></div>");
function xiaoshi(){
      $("#BgDiv").css("display","none");
      $("#DialogDiv").css("display","none");
}
$("#btnClose").click(function(){xiaoshi();});

返回上一页

---

讨论区

---

你可能也喜欢

chm文件转换成html文件，解决chm文件无法使用浏览器打开的问题 2018.05.20,11 pv
键盘对应的键值 2018.04.15,8 pv
Bootstrap弹出层(modal)垂直居中简单解决方案(无需修改js) 2017.09.25,9 pv

---

强制H5必须用微信打开的判断 2017.01.05,10 pv
MUI语法琐碎 2016.11.09,8 pv
一些前端工程师必须知道的开源前端框架 2016.11.04,12 pv