php 模态框效果,超酷的模态框效果

插件描述：Nifty Modal Window Effects是一个CSS3实现的模态框，包含多种方式弹出效果。

简介

Nifty Modal Window Effects 为我们提供了多种弹出效果的模态框，通过CSS3实现。

用法

首先我们将下面元素添加到body中

Modal Dialog

This is a modal window. You can do the following things with it:

Read: Modal windows will probably tell you something important so don't forget to read what it says.
Look: modal windows enjoy a certain kind of attention; just look at it and appreciate its presence.
Close: click on the button below to close the modal.

Close me!

...

该效果主要是通过 CSS3完成的，以下是相关的CSS代码：

.md-modal {

position: fixed;

top: 50%;

left: 50%;

width: 50%;

max-width: 630px;

min-width: 320px;

height: auto;

z-index: 2000;

visibility: hidden;

backface-visibility: hidden;

transform: translateX(-50%) translateY(-50%);

}

.md-show {

visibility: visible;

}

.md-overlay {

position: fixed;

width: 100%;

height: 100%;

visibility: hidden;

top: 0;

left: 0;

z-index: 1000;

opacity: 0;

background: rgba(143,27,15,0.8);

transition: all 0.3s;

}

.md-show ~ .md-overlay {

opacity: 1;

visibility: visible;

}

.md-perspective,

.md-perspective body {

height: 100%;

overflow: hidden;

}

.md-perspective body {

background: #222;

perspective: 600px;

}

.container {

background: #e74c3c;

min-height: 100%;

}

/* Effect 5: newspaper */

.md-show.md-effect-5 ~ .md-overlay {

background: rgba(0,127,108,0.8);

}

.md-effect-5 .md-content {

transform: scale(0) rotate(720deg);

opacity: 0;

transition: all 0.5s;

}

.md-show.md-effect-5 .md-content {

transform: scale(1) rotate(0deg);

opacity: 1;

}

注意，该效果只能在现代浏览器中使用，不支持老版本的浏览器，请根据自己的需求使用。

php 模态框效果,超酷的模态框效果 - Nifty相关推荐

html普通幻灯片效果,超酷的CSS3幻灯片效果-前端开发博客_html/css_WEB-ITnose
对于 css3 的喜爱可谓日渐增加,无奈自己很忙,没有多少时间来研究,这段时间也做了很多这方面的项目,比如类似于QQ 的IM沟通工具界面,比如新的博客界面,比如这个css 幻灯片演示(拿来的). 如果 ...
html旋转木马切换效果,超酷jQuery 3D旋转木马效果轮播图插件 -HTML5功能
简要教程 jCarrousel是一款炫酷且强大的3D旋转木马效果轮播图jQuery插件.该旋转木马插件可以自适应屏幕大小来调整图片的间距,可实现自动播放等.jCarrousel代码简洁,使用简单,值得 ...
超酷的模态框效果 - Nifty
dreamweaver免费视频教程:http://www.51rgb.com/mproductzh.aspx?classid=31加讨论群390180913 入群即可参加周一至周五免费公开课并获得免费 ...
超酷消息警告框插件（SweetAlert）
今天给大家推荐一款不错的超酷消息警告框–SweetAlert:SweetAlert是一款不需要jQuery支持的原生js提示框,风格类似bootstrap.它的提示框不仅美丽动人,并且允许自定义,支持 ...
html js 循环提示框,纯js超酷消息提示框插件notice.js
notice.js是一款纯js超酷消息提示框插件.notice.js为纯js编写,没有任何依赖文件.通过它可以在页面上制作出漂亮的toast消息通知框效果.该js消息提示框插件的特点还有: 支持4中情 ...
【有利可图网】PS实战系列：巧用PS设计制作超酷的马赛克拼图效果
本篇教大家如何巧用photoshop设计制作一个超酷的马赛克拼图效果!教程简单易学,感兴趣的小伙伴赶快收藏参考练习下!
帮助你生成超酷计时器和时钟效果的jQuery插件 - FlipClock.js
为什么80%的码农都做不了架构师?>>> 日期:2013-6-6 来源:GBin1.com 在线演示 FlipClock.js 是一款功能强大并且支持自定义的时钟和计时器的j ...
sweetalert php,SweetAlert-js超酷消息警告框插件
简单介绍 SweetAlert是一款神奇的javascript弹出消息警告框插件.可替换所有alert弹框使用方法要使用该插件,首先要在header中引入以下文件(已打包附件内,上传注意是模版文件 ...
ai的预览模式切换_绝对高级！AI打造超酷矩阵纬度文字效果！
完成效果如下在本教程中, 您将学习如何在AI中使用 "偏移路径" 选项, 以及通过 "外观" 面板方法和 "菜单栏" 方法使用它的区别. ...
css3旋转木马轮播图,超酷jQuery 3D旋转木马效果轮播图插件
jCarrousel是一款炫酷且强大的3D旋转木马效果轮播图jQuery插件.该旋转木马插件可以自适应屏幕大小来调整图片的间距,可实现自动播放等.jCarrousel代码简洁,使用简单,值得推荐. 由 ...

php 模态框效果,超酷的模态框效果 - Nifty

Modal Dialog

php 模态框效果,超酷的模态框效果 - Nifty相关推荐

最新文章

热门文章