今天为大家介绍一款简单的弹出窗。大家在浏览网页的时候就会遇到某些提示信息或者是警告信息,这些信息也往往是以弹出窗的形式出现的。这些弹出窗口也往往是以浏览器默认的样式出现的,各个浏览器或者是手机网站渲染的效果也往往不同。下面做一个统一的弹窗框,可以根据根据自己的喜好自动调整。
需要的技术支持:一般jQuery库;
HTML代码:
<div class="popup_back" style="display:none;"></div> <div class="popup_window_first" style="display:none;"> <p class="popup_cont">this is content.</p> <a href="javascript:void(0)" class="popup_btn" onclick="closeWindow();">确定</a> </div> <a href="javascript:void(0)" class="btn_click">点击这里</a>
CSS代码:
.popup_back{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.3);} .popup_window_first{width: 280px;height: 150px;position: fixed;margin:auto;top: 0;bottom: 0;right: 0;left: 0;text-align:center;background: rgba(0,0,0,0.8);color: #fff;border-radius: 10px;} .popup_window_first .popup_cont{width: 100%;height: 50%;border-bottom: 1px solid #fff;} .popup_window_first .popup_btn{display: block;margin:0 auto;width: 60px;height: 30px;line-height:30px;text-decoration:none;color: #000;background: #fff;border-radius: 5px;} .btn_click{display: block;width: 120px;height: 30px;line-height:30px;margin: 0 auto;color: #fff;background: rgba(0,0,0,0.5);text-align: center;text-decoration: none;border-radius: 5px;}
js代码:
function closeWindow(){ $('.popup_back,.popup_window_first').hide(); } $('.btn_click').click(function(){ $('.popup_window_first,.popup_back').show(); });
演示效果如下:
未点击前:
点击后:
其中有几个关键点,在这里也简单介绍一下:
1.弹出层的定位:主要是position:fixed;在起作用,但要做到真正居中显示,还要加上margin:auto;top:0;bottom:0;left:0;right:0;这段css代码;
2.遮罩层的设置:遮罩层的设置需要另外写一个块,如上代码所示。但要实现覆盖全屏,则要加上position:fixed;width:100%;height:100%;background:#333;这段css代码。position:fixed;让这个块脱离正常文档流,重新在body中定位,这里设置宽为100%和高为100%。实现遮罩层的效果;
3.关闭弹出层:函数closeWindow实现关闭弹出层和遮罩层的效果,很简单,就不多说了。
相关推荐
CSS多种弹出窗效果源码
纯CSS实现div弹出对话框 可以应用于C#,.net 里面。 页面比较好看。
CSS+JS弹出窗口,点击按钮弹出div小窗口,好用实在
JS弹出遮罩层,像百度,当您想发表评论,却还没登录时,就会弹出一个登录的小窗口
CSS3带遮罩背景倾斜切入动画弹出层窗口特效是一款简洁而又富有创意的点击动画弹出层展示图文内容插件,关闭时也有相同的动画效果。
利用DIV实现在Web窗体内弹出一个DIV窗体,类似QQ空间弹出的登录窗口。。。。
css+div制作的弹出登陆窗口 ,类似优酷、百度、迅雷博客的 那种,代码非常简单,共有兴趣者参考
用html+css+js/jquery实现的点击按钮弹出一个层窗口效果。注释部分使用js实现的,script部分则是jquery实现的,效果更好一些。可以把jquery部分注释掉来看js的效果
jQuery CSS3实现弹出确认信息是一款简洁实用的弹出确认信息特效。
js代码 [removed] $('button').click(function(){ $('.pop-up').addClass('open');...一款基于jQuery CSS3实现的点击弹出邮箱订阅窗口代码,jQuery弹出层填写邮箱地址订阅获取网站信息特效,还有动画效果。
HTML5 css3制作的智能手机风格的弹出提示框,这些提示框一种有四种类型:1、操作成功、2、误提示、3、正在加载、4、通用提示。鼠标点击对应的演示按钮,即可显示出提示效果,每个提示框中的内容都具有动画效果。这些...
jquery css3点击弹出订阅窗口代码
js+css点击视频在弹出的小窗口中播放
div+css实现弹出窗口背景变暗效果 div+css实现弹出窗口
19种html5 CSS3绚丽的弹出窗口动画过渡效果
19种CSS绚丽弹窗样式.rar 里面的效果真的很不错 可以试试
jQuery点击弹出订阅窗口代码是一款基于jQuery CSS3实现的订阅信息窗口代码。
给大家介绍基于jquery div css三者相结合实现弹出登录窗口,实现大致思路是这样的:通过dispaly:none属性先隐藏在显示,感兴趣的朋友一起看看代码实现过程吧
jQuery zoom图片弹出层插件简单的图片相册弹出层窗口展示代码 引入相关js和css文件 <link rel="stylesheet" href="css/zoom.css" media="all" /> [removed][removed] [removed][removed] html 格式 ...
有js+css和jquery+css实现的弹出居中的遮罩层,兼容IE6 7 8 和ff