超酷的模态框效果 - Nifty

原创
2015/03/19 12:50
阅读数 184

dreamweaver免费视频教程:http://www.51rgb.com/mproductzh.aspx?classid=31加讨论群390180913 入群即可参加周一至周五免费公开课并获得免费视频 绝对干货!

超酷的模态框效果 - Nifty

 

 是一个CSS3实现的模态框,包含多种方式弹出效果。

用法

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

<div class="md-modal md-effect-1" id="modal-1">

    <div class="md-content">

        <h3>Modal Dialog</h3>

        <div>

            <p>This is a modal window. You can do the following things with it:</p>

            <ul>

                <li><strong>Read:</strong> Modal windows will probably tell you something important so don't forget to read what it says.</li>

                <li><strong>Look:</strong> modal windows enjoy a certain kind of attention; just look at it and appreciate its presence.</li>

                <li><strong>Close:</strong> click on the button below to close the modal.</li>

            </ul>

            <button class="md-close">Close me!</button>

        </div>

    </div>

</div>

  

...

  

<div class="md-overlay"></div>

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

.md-modal {

    positionfixed;

    top50%;

    left50%;

    width50%;

    max-width630px;

    min-width320px;

    heightauto;

    z-index2000;

    visibilityhidden;

    backface-visibilityhidden;

    transformtranslateX(-50%translateY(-50%);

}

  

.md-show {

    visibilityvisible;

}

  

.md-overlay {

    positionfixed;

    width100%;

    height100%;

    visibilityhidden;

    top0;

    left0;

    z-index1000;

    opacity0;

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

    transitionall 0.3s;

}

  

.md-show ~ .md-overlay {

    opacity1;

    visibilityvisible;

}

 

.md-perspective,

.md-perspective body {

    height100%;

    overflowhidden;

}

  

.md-perspective body  {

    background#222;

    perspective600px;

}

  

.container {

    background#e74c3c;

    min-height100%;

}

 

/* Effect 5: newspaper */

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

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

}

  

.md-effect-5 .md-content {

    transformscale(0rotate(720deg);

    opacity0;

    transitionall 0.5s;

}

  

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

    transformscale(1rotate(0deg);

    opacity1;

}

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

===========以下代码由  create_time  提供===============

楼上的方法缺了,我在这里补上,如何更改,里面的颜色,component.css,里面的,.md-trigger 是通用的样式,如果要,又多样式得自己拓展。引入你下载的js文件,和css文件,里面的,default是布局样式,component.css按钮样式。

 

代码压缩包下载地址:

51RGB

只看文字怎么够,51小编给你准备了大量免费课程视频 0基础起步 打开即看不啰嗦

视频直达网址:http://www.51rgb.com/mproductzh.aspx?classid=31

站内还有PS AI 各种一线软件课程

 


展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部