【特效】弹窗效果(多个页面可统一调用,带遮罩背景)

弹窗效果太常见了,一个网站中往往会有多个弹窗,而且样式还不完全一样,这时候可以写一个函数,整站统一调用。命名好通用的class和独自样式的class,弹窗的居中显示原理很简单,设其定位fixed,top:50%和left:50%,然后用js获取弹窗的宽和高,然后设置其上边距和左边距分别为宽度除以2和高度除以2。整体效果非常好,也不会受页面高度的影响。

具体看代码则明了:http://pan.baidu.com/s/1i5sBJDj

样式好简朴,没有美化啊哈哈,前端人员只看代码不需要美化了吧!

还可以给弹窗加上可拖动的效果,代码不难,自行添加吧,这样体验更好了。

时间: 2025-01-06 01:52:12

【特效】弹窗效果(多个页面可统一调用,带遮罩背景)的相关文章

用CSS3动画特效实现弹窗效果

提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了. CSS3特殊效果 CSS3为用户添加了三个特殊效果的处理方式:过渡.动画.变化.当用户和界面元素交互时,使用这些特殊样式可大大改善用户的体验效果.这些效果直接由浏览器引擎处理,可以节省开销.尽管如此,它们也会耗费大量的处理能力,尤其是一些复杂的WEB页面上.即使是最基本的效果,也是如此.本篇的目的只是熟悉下这三种CSS处理效果,不推荐在实际系统中大篇幅使用. 温馨提示:请谨慎大篇幅使用这些

【特效】jquery选项卡插件,页面多个选项卡统一调用

把选项卡整合了一下,写成个插件,这样可以整个站,或整个页面有多个选项卡时,统一调用.代码的具体注意事项已经写进注释了.用于js获取元素的class名称必须有,选项卡本身的样式,另再取一个名字来设置(本人不大喜欢用id,一般写js代码也用class名称来获取元素).这样也在一定意义上实现了行为和样式的分离. html: <!--第一个选项卡--> <div class="js_tab box1"> <h2 class="jsTab_title&qu

JS网页特效操作流程——下拉菜单列表与登录注册弹窗效果

下拉菜单列表 <style>        *{            margin: 0px;            padding: 0px;        }        .menu{            width: 1100px;            height: 30px;            background-image: url(img/魅力罗兰Music炫图18.jpg);            margin-left: 200px;            ma

16种基于 CSS3 &amp; SVG 的创意的弹窗效果

在去年,我给大家分享了<基于 CSS3 的精美模态窗口效果>,而今天我要与大家分享一些新鲜的想法.风格和趋势变化,要求更加适合现代UI的不同的效果.这组新模态窗口效果包含了一些微妙的动画,还有一些应用了SVG变形技术. 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款经典的白

炫酷弹窗效果制作

昨天在家看电视时,退出的时候发现了一个弹窗效果,整个背景模糊,觉得这样的效果好炫,要比纯色加透明度高大上好多,连续试了几个界面,最终确定效果由css实现的,于是今天一大早来到公司便赶紧搜索了一下,虽然兼容性奇差,但是一个css属性就可以搞定.瞬间感觉自己知道的真是太少了~~ 首先回忆一下弹窗的实现,一般我们分为两层,弹出窗口层(popus)和遮罩层(mask),通常情况下我习惯就这两元素全部设成fixed定位,具体和absolute区别一试便知.对于mask层自不用多少,我们如下给他设置属性,让

【Android UI设计与开发】第14期:顶部标题栏(五)两种方式实现仿微信标题栏弹窗效果

转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9093821         博主在这篇文章中将会继续围绕顶部标题栏专题来进行实例讲解,今天要讲解的主题是分别使用PopupWindow和Activity两种不同的方式来实现仿微信顶部标题栏弹窗的这样一个效果. 一.实现效果图 这里为了演示方便,我将两种方法放在一个应用程序中演示,这个是主界面 虽然两种实现的方式不一样,但是最终的效果图都是差不多的     二.项目结构图  

JavaScript特效源码(7、页面特效二)

7.将站点加入频道栏 将站点加入频道栏[看详细说明] ====1.加入channel的方法:使用如下连接指向你的频道文件*.cdf. <a href="javascript:window.external.addChannel('jschannel.cdf')"> ============================================================================================== *.cdf文件的内容如

Android自定义弹窗效果

Android的弹窗效果有很多种,就最简单而言,就可以调用一个AlertDialog弹窗显示,可是要自定义弹窗效果有以下这种方法,就我个人而言感觉挺方便的,适用性也挺广的. 首先先简单写个AlertDialog的使用 public void showDialog(){ AlertDialog dialog = new AlertDialog.Builder(this) .setTitle("提示") .setMessage(getResources().getString("

window.confirm()方法,效果是在页面上弹出对话框

window.confirm()方法是有返回值的,返回值为true,false两种情况 window.confirm()方法在页面上显示带确定"和"取消"按钮的提示信息,当点"确定"的时候,返回值为true;当点"取消"按钮的时候,返回值为false. window.confirm()方法,效果是在页面上弹出对话框