在网页中间弹窗代码-网页遮罩效果

江山如画 • 2019年1月5日下午3:53 • 网页特效 • 阅读 4816

在网页中间弹出窗口，使整个网页变半透明。

<style> .bg{position:absolute;z-index:999;filter:alpha(opacity=50);background:#666;opacity: 0.5;-moz-opacity: 0.5;left:0;top:0;height:99%;width:100%;} .beian_winBG { MARGIN-TOP: -100px; LEFT: 50%; MARGIN-LEFT: -190px; WIDTH: 376px; POSITION: absolute; TOP: 50%; HEIGHT:200px;border:#666666 1px solid;z-index: 1000; } </style> <div id="alert_win" style="display:none;"> <div id="mask" style="top:0;left:0;position: absolute;z-index:1000;" class="bg"></div> <DIV class=beian_winBG id=beian_popup> <div id="divOneStep" style="z-index:1002;width:100%;height:200px;background: #fff;position:absolute;"> <div style="width:100%;background:#f1f1f1;height:30px;light-height:30px;border-bottom:#666666 1px solid;text-align:right;"><a href="javascript:;" onClick="alert_win.style.display='none';">关闭</a> </div> <div>125网页设计-权威的网页制作，网页设计教程基地：包含html、css、Javascript等教程及网页制作素材，网页设计欣赏，免费空间，网站推广等资源</div> </div> <div style="z-index:1001;position:absolute;"><iframe id="frmOneStep" width="100%" height="200" frameborder="0" scrolling="no" src="about:blank"></iframe></div> </DIV> </div> <p><a href="javascript:;" onClick="alert_win.style.display='block';">点击，在网页中间弹出窗口</a></p>

Tips:You can change the code before run.

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/3124.html

赞 (1)

江山如画管理团队

微信扫一扫

微信扫一扫

支付宝扫一扫

支付宝扫一扫

毛笔字生成器，毛笔字在线生成网站

上一篇 2019年1月5日下午3:47

熊浩:直面你的焦虑! 视频+原文

下一篇 2019年1月5日下午4:05

网页特效

点击弹出带关闭按钮的窗口特效（兼容所有浏览器）

弹出页面被大多浏览器拦截，现在多数改为弹出窗口，即通过弹出层来实现，今天中国网页设计给大家分享两个点击弹出带关闭按钮的窗口代码。 jquery实现可拖动弹出窗口特效 <html > <head> <title>jquery实现可拖动弹出窗口特效-带关闭按钮</title> <script type=&qu…

江山如画
2018年5月9日
9.7K00
网页特效

CSS实现的左侧垂直导航（简洁）

CSS实现的左侧垂直导航（简洁），站长们可以方便的更改样式。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <t…

江山如画
2018年9月22日
6.0K01
网页制作

纯CSS制作红色网站二级下拉导航菜单

纯CSS制作红色网站二级下拉导航菜单，代码非常简洁，适合修改后使用，入门就能掌握。二级下拉导航菜单HTML代码： <nav> <ul> <li><a href=”#”>首页</a></li> <li><a href=”#”>电影</a> <ul…

江山如画
2019年4月17日
14.9K04
源码下载

ScrollPicLeft.js实现的图片前后切换效果-源码下载

ScrollPicLeft.js实现的图片的前后切换效果，适用于网页中的证书展示、推荐商品之类的栏目。功能：可以手动点击前后切换箭头按钮，进行图片的翻页，浏览上一张，下一张的效果。特点：代码精简，不需要使用JQuery，功能强大，使用非常的简单，便利。！在网页引入ScrollPicLeft.js <script type=”text/javasc…

江山如画
2019年11月1日
8.1K01
网页特效

立体动画按钮、切换开关

实例名称：立体动画按钮、切换开关在线预览：https://codepen.io/chrisgannon/pen/ZaPmKp HTML代码： <div id=”app”></div> CSS代码： body { background-color:#FFFCF9; overflow: hidden; text-align:center;…

江山如画
2019年10月17日
12.2K00
网页特效

精美的滑出式水平导航特效

一个精美的滑出式水平导航特效，打开页面只能看到文本链接，用户将鼠标悬停于标签上时，该导航菜单项目会滑出。预览下载源码 1、HTML结构导航实现仅用一个简单的无序列表 <ul id=”navigation”> <li class=”home”><a href=””><span>Home</sp…

江山如画
2018年2月6日
4.8K00

发表回复

登录后才能评论