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

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

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

<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

网页特效

超酷的HTML5 3D图片旋转动画特效

中国网页设计分享的一款HTML5 3D图片动画特效，使用js动画框架TweenMax 技术实现。这款HTML5 3D动画非常酷，当在图片上面拖动鼠标时，图片会在垂直方向分裂出数块小长方体，然后每一个小长方体沿着鼠标拖动的方向旋转。效果演示源码下载

江山如画
2018年9月28日
5.4K00
网页特效

鼠标指向图片实现放大效果-CSS3特效

鼠标指向图片实现放大效果，多用于产品展示，可以通过Js，jquery来实现。为更好的优化网站，最好的方法还是纯css来实现。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>纯css实现鼠标指向图片放大效果|…

江山如画
2018年7月14日
3.2K00
网页特效

点击按钮发送验证码，隔10秒再次发送倒计时效果-JS代码

为了防止用户恶意获取短信验证码或邮箱验证，在网站制作时会考虑在点击获取验证码的按钮上做个倒计时的效果。需要隔10秒再次发送，实现这个功能，需要用到setInterval和clearInterval。 setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到 clearIn…

江山如画
2019年10月31日
3.1K00
网页特效

立体动画按钮、切换开关

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

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

带左右箭头控制的网站幻灯片轮播切换效果

一款比较实用的带左右箭头按钮控制的jquery slider图片插件，网站幻灯片焦点图片轮播切换代码下载。页面代码非常简洁，适合调用更改。 <div class=”slider”> <div class=”slider-img”> <ul class=”slider-img-ul”> <li><img …

江山如画
2019年4月10日
9.7K07
网页特效

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

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

江山如画
2018年5月9日
3.9K00

发表回复

登录后才能评论