模拟系统的弹出框

系统自带的弹出框 总结 链接  http://blog.csdn.net/anhuidelinger/article/details/17024491

参考这个网站学习模态框的动态弹出   http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/,网站提供打包好的资源下载。

html中的基本结构:

<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>

通过js来控制 .md-modal 元素的classs来实现模态框的动画效果。

文中没有引用jquery 而是对原生js进行封装得到个classie对象;

* classie.has( elem, 'my-class' ) -> true/false 布尔值 根据元素是否含有指定的classname(my-class)来做出判断

* classie.add( elem, 'my-new-class' ) -> 为元素加上classname(my-new-class)

* classie.remove( elem, 'my-unwanted-class' )-> 为元素删除classname(my-unwanted-class)

*classie.toggle( elem, 'my-class' ) -> 元素切换classname(my-class),如果元素含有这个class则删除,没有则添加。

创造这个对象时用到一个 classList 属性。这个家伙竟然是原生的 ,它的构造器是DOMTokenList,它提供了这些已知的API:length、item、add、remove、contains、toggle。请在控制台中查看这个神奇的东西,document.body.classList!

js 部分 中的动态为一个元素(文中是div.md-overlay)添加时间,element.addEventListener(“eventString”,callBack),要在开始前先移除元素本身的事件,因为addEventListener方法可以为元素绑定相同事件多次。

这点jquery中的事件的绑定方式和这个是一样的,都需要先移除一次时间在绑定。

css中主要用到了transition过渡属性,通过控制 transfrom( translate scale rotate  ) transform-style:perspective-3d  opacity 等属性来控制元素的显示

3d中perspective 视距的运用以及3d时的z轴距离,在3轴上的deg问题(从每个轴的正向看回去,正角度代表顺时针,负角度代表逆时针)

效果未开始前的主要样式
/* 最后几个效果需要3d效果,需要用到perspective属性 该属性定义3d元素距视图的距离,以像素计 */
.md-perspective body  {
background: #;
-webkit-perspective: 600px;
-moz-perspective: 600px;
perspective: 600px;
} .md-modal {
position: fixed;
top: %;
left: %;
width: %;
max-width: 630px;
min-width: 320px;
height: auto;
z-index: ;
visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateX(-%) translateY(-%);
-moz-transform: translateX(-%) translateY(-%);
-ms-transform: translateX(-%) translateY(-%);
transform: translateX(-%) translateY(-%);/* 是元素居中 */
}

/* transition 过渡属性 */
.md-overlay {
position: fixed;
width: %;
height: %;
visibility: hidden;
top: ;
left: ;
z-index: ;
opacity: ;
background: rgba(,,,0.8);
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;/* 过渡,所有属性 0,3miao */
}

/* 通过给div.md-modal添加md-show,根据这个选择器来控制div.md-overlay的显示。 visibility:hidden的元素虽然在某些元素的上面但是不妨碍这些元素的事件 */
.md-show ~ .md-overlay {
opacity: ;
visibility: visible;
}
---------不考虑兼容性------ (transform、transition)

效果一:淡入,放大。

css:

.md-effect- .md-content {

   transform: scale(0.7);
opacity: ;
transition: all .3s; /* transiton-property:opacity,transform;transition-duration:0.3s;transiton-timing-function:ease;transition-delay:0; */
} .md-show.md-effect- .md-content {
transform: scale();
opacity: ;
}

效果二:从右边滑入。

css:  .

md-effect-2 .md-content {

   transform: translateX(20%);
opacity: 0;
transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); /* transiton-property:opacity,transform;transition-duration:0.3s;transiton-timing-function:cubic-bezier(0.25,0,5,0,5,0.9);transition-delay:0; */
} .md-show.md-effect-2 .md-content {
transform: translateX(0);
opacity: 1;
}

效果三:从下滑入

css:

.md-effect-3 .md-content {
opacity: 0;
transition: all 0.3s;/* 同上 */
} .md-show.md-effect-3 .md-content {
transform: translateY(0);
opacity: 1;
}

效果四:新闻类(旋转进入,从小变大)

css

.md-effect-4 .md-content {
transform: scale(0) rotate(720deg);/* 旋转720度 正数顺时针,负数逆时针 */
opacity: 0;
} .md-show.md-effect-4 ~ .md-overlay,
.md-effect-4 .md-content {
transition: all 0.5s;/* transition-property:transform,opacity;transition-duration:0.5s;transition-timing-function:ease;transtion-delay:0;*/
} .md-show.md-effect-4 .md-content {
transform: scale(1) rotate(0deg);
opacity: 1;
}

效果五:下落

css

.md-effect-5.md-modal {
perspective: 1300px;/* 设置视距1300px */
} .md-effect-5 .md-content {
transform-style: preserve-3d;/* transform样式 flat 子元素将不保留期3位置 perspective-3d 子元素保留3d位置 */
transform: translateZ(600px) rotateX(20deg); /* 初始时z轴正向位置600px(垂直于屏幕方向,靠近我们的一侧为z轴正向) x轴正向看过去(在屏幕上从左向右看过去)顺时针旋转20度 */
opacity: 0;
} .md-show.md-effect-5 .md-content {
transition: all 3s ease-in;
transform: translateZ(0px) rotateX(0deg);
opacity: 1;
}

效果六:滑入和滑落结合

css

.md-effect-6.md-modal {
perspective: 1300px;
} .md-effect-6 .md-content {
transform-style: preserve-3d;
transform: translate(30%) translateZ(600px) rotate(10deg); /* translate(30%)->translateX(30%);translateY(30%),同理 rotate() */
opacity: 0;
} .md-show.md-effect-6 .md-content {
transition: all 3s ease-in;
transform: translate(0%) translateZ(0) rotate(0deg);
opacity: 1;
}

效果七:滑入并且固定在屏幕上方

css

.md-effect-7{
top: 0;
transform: translateX(-50%);
} .md-effect-7 .md-content {
transform: translateY(-200%);
transition: all .3s; /* translateX(-50% - > 0);translateY(-200% -> 0) opaacity(0 -> 1) border-bottom-right(0 -> 3px) border-bottom-left(0 -> 3px)*/
opacity: 0;
} .md-show.md-effect-7 .md-content {
transform: translateY(0%);
border-radius: 0 0 3px 3px;
opacity: 1;
}

效果八:水平翻转

css

.md-effect-8.md-modal {
perspective: 1300px;
} .md-effect-8 .md-content {
transform-style: preserve-3d;
transform: rotateY(-70deg);/* 从y轴正向看去逆时针转70度 */
transition: all 0.3s;
opacity: 0;
} .md-show.md-effect-8 .md-content {
transform: rotateY(0deg);
opacity: 1;
}

效果九:垂直翻转

css

.md-effect-9.md-modal {
perspective: 1300px;
} .md-effect-9 .md-content {
transform-style: preserve-3d;
transform: rotateX(-70deg);/* 从X轴正向看去逆时针转70度*/
transition: all 0.3s;
opacity: 0;
} .md-show.md-effect-9 .md-content {
transform: rotateX(0deg);
opacity: 1;
} 效果十:3d 转入
css
.md-effect-10.md-modal {

    perspective: 1300px;
} .md-effect-10 .md-content {
transform-style: preserve-3d;
transform: rotateX(-60deg);
transform-origin: 50% 0; /* 规定原点位置 在元素上边的中点为原点 */
opacity: 0;
transition: all 0.3s;
} .md-show.md-effect-10 .md-content {
transform: rotateX(0deg);
opacity: 1;
}


js 常见弹出框学习的更多相关文章

  1. js自定义弹出框

    js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="te ...

  2. 【原创】贡献一个JS的弹出框代码...

    一.前言 最近在做一个项目,自己感觉系统自带的alert()方法的弹出框实在是不堪入目,所以在网上找了一些资料,然后自己加工了一下,做出了自己的一个js弹出框,在这里贡献出来,希望对你有帮助. 二.开 ...

  3. js登录弹出框插件

    第一步:页面引入css:<link rel="stylesheet" type="text/css"" href="common/cs ...

  4. jsp + js + 前端弹出框

    在项目中,前端页面我们时常需要各种各样的弹出框: 1.alert对话框:显示含有给定消息的"JavaScript Alert"对话框 代码: var a = "Hello ...

  5. js swal()弹出框

    做前端开发的时候时常会遇到修改成功.新增成功这类弹出框,用alert的话未免有点太low了,而swal()是一个简单又实用的弹出框方法 alert 弹出框样式如下: swal() 弹出框样式如下: 代 ...

  6. js实现弹出框的拖拽

    //HTML部分 <div class="wrap"></div> <div class="popUpBox"> <d ...

  7. js实现弹出框跟随鼠标移动

    又是新的一天网上冲浪,在bing的搜索页面下看到这样一个效果: 即弹出框随着鼠标的移动而移动.思路大概为: 调用onmousemove函数,将鼠标的当前位置赋予弹出框即可 //html <div ...

  8. Js:消息弹出框、获取时间区间、时间格式、easyui datebox 自定义校验、表单数据转化json、控制两个日期不能只填一个

    (function ($) { $.messageBox = function (message) { $.messager.show({ title:'消息框提示', msg:message, sh ...

  9. 原生js制作弹出框

    完整代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

随机推荐

  1. HDU--杭电--1026--Ignatius and the Princess I--广搜--直接暴力0MS,优先队列的一边站

    别人都是广搜+优先队列,我没空临时学,所以就直接自己暴力了 Ignatius and the Princess I Time Limit: 2000/1000 MS (Java/Others)     ...

  2. Java基础之类的初始化顺序

    对于静态变量.静态初始化块.变量.初始化块.构造器,它们的初始化顺序依次是 (静态变量.静态初始化块)>(变量.初始化块)>构造器 对于继承的情况: 1. 父类--静态变量    2. 父 ...

  3. SSH整合开发的web.xml配置

    <?xml version="1.0" encoding="UTF-8"?><web-app version="2.5" ...

  4. Wen前端性能优化

    Web前端性能优化 一般说来Web前端指网站业务逻辑之前的部分,包括浏览器加载.网站视图模型.图片服务.CDN服务等.主要优化手段有优化浏览器访问.使用反向代理.CDN等. 一.浏览器访问优化 减少h ...

  5. Sprint 2(第一天)

    Sprint 2计划会议: 目标: 1.实现用户模块的权限控制,能够进行用户登录的功能 2.对菜单模块实现增加菜单列表详情,修改菜单列表详情,删除菜单列表详情,查询菜单列表详情的功能 3.实现菜品分类 ...

  6. window上利用pip安装pandas

    官网推荐的是直接使用Anoconda,它集成了pandas,可以直接使用.安装挺简单的,有windows下的安装包.如果不想安装庞大的Anoconda,那就一步一步用pip来安装pandas.下面我主 ...

  7. java实现服务端守护进程来监听客户端通过上传json文件写数据到hbase中

    1.项目介绍: 由于大数据部门涉及到其他部门将数据传到数据中心,大部分公司采用的方式是用json文件的方式传输,因此就需要编写服务端和客户端的小程序了.而我主要实现服务端的代码,也有相应的客户端的测试 ...

  8. mongodb php driver on windows

    windows env: os:windows 10 soft: XAMPP for Windows 5.6.15    php version:5.6.15  Architecture:x86 Th ...

  9. 拓扑排序&&欧拉(回)路

    摘要:最近是不适合写代码么?忘记初始化wa到死<_=_=_>.唔--最近在学习图论,从基础搞起,先搞了拓扑排序和欧拉(回)路. Part 0. 拓扑排序 ==挖坑== Part 1. 欧拉 ...

  10. html之页面元素印射

    首先我遇到了一个问题,尽管不是搞前端开发的但事情交到了我这里就有必要去解决. 而这个问题就是我在这边文本框输入的内容要显示在另一个文本框中其实也是非常简单.但是对于初出茅庐的新手来说就有可能会难倒他. ...