<!doctype html>

<html>

	<head>

		<meta charset="utf-8">

		<title>首页</title>

		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

		<meta name="apple-touch-fullscreen" content="yes">

		<meta content="yes" name="apple-mobile-web-app-capable" />

		<meta content="telephone=no" name="format-detection" />

		<meta content="email=no" name="format-detection" />

		<link href="css/mbox.css" type="text/css" rel="stylesheet">

		<script src="mbox.js" type="text/javascript"></script>

		<style>

			.disn {

				display: none;

			}

			/*start

				对于正常方向的框，每个子元素的上边缘沿着框的顶边放置。

				对于反方向的框，每个子元素的下边缘沿着框的底边放置。

				测试

				end

				对于正常方向的框，每个子元素的下边缘沿着框的底边放置。

				对于反方向的框，每个子元素的上边缘沿着框的顶边放置。

				测试

				center

				均等地分割多余的空间，一半位于子元素之上，另一半位于子元素之下。*/

			.main {

				height: 100%;

				width: 100%;

				position: absolute;

				display: -webkit-box;

				-webkit-box-orient: vertical;

				-webkit-box-align: center;

				-webkit-box-pack: center;

			}

			.content {

				background: #ccc;

				height: 200px;

				width: 80%;

			}

		</style>

	</head>

	<body>

		<div class="main" style="display:none;">

			<div class="content" style="line-height:2;text-align:center;">方案二：使用position & margin:auto 垂直居中</div>

		</div>

		<div style="padding:25px 50px; font-size:16px;">

			<a href="javascript:;" id="ontan">请点击我！</a>

		</div>

		<div style="padding:25px 50px; font-size:16px;">

			<a href="javascript:;" id="ontan01">请点击我！</a>

		</div>

		<div style="padding:25px 50px; font-size:16px;">

			<a href="javascript:;" id="spload">请点击我！sploading</a>

		</div>

		<div class="disn" id="ces" style="width:100%;">

			<ul>

				<li class="tt" id="ddd">点我看效果</li>

				<li id="yy">toggleClass</li>

			</ul>

		</div>

		<p id="test">对于正常方向的框，每个子元素的上边缘沿着框的顶边放置对于正常方向的框，原创弹出层插件</p>

	</body>

	<script type="text/javascript">

		var getId = document.getElementById("ontan");

		var getId01 = document.getElementById("ontan01");

		var spload = document.getElementById('spload');

		document.getElementById("ddd").onclick = function() {

			alert(121545455);

		}

		getId.onclick = function() {

			mBox.open({

				//width:'150px',

				//title:["我就是标题！","background-color:#3293E0;color:#fff;"],

				content: mBox.cell("#test"),

				btnName: ['确定', '取消']

			});

		}

		getId01.onclick = function() {

			$M.open({

				//width:'150px',

				//title:["我就是标题！","background-color:#3293E0;color:#fff;"],

				content: "<div>对于正常方向的框</div>",

				btnName: ['确定', '取消']

			});

		}

		spload.onclick = function() {

			mBox.open({

				content: '您好',

				conStyle: 'background-color:rgba(0,0,0,0.6); color:#fff; border:none;text-align: center;bottom: -200px;animation:up 0.3s 0s',

				time: 2000 //2秒后自动关闭

			});

		}

	</script>

	<style type="text/css">

		@keyframes up {

			0% {

				opacity: 0;

				transform: translateY(100px)

			}

			100% {

				opacity: 1;

				transform: translateY(0)

			}

		}

	</style>

</html>

　　看看layer的msg效果

让mbox支持up效果的更多相关文章

  1. 使IE6支持:hover效果

    :hover是在CSS中用来制作效果最常用到的一个伪类,比如:标签或div上的鼠标悬停效果 li:hover,div:hover等. 但这种效果是css2及以上版本才添加的,对于只支持css1的浏览器 ...

  2. 使IE6同样支持圆角效果

    之前写到过,IE6不支持:hover效果的解决办法,其它这个跟它一样.IE6(7/8)不支持border-radius属性,所以其中的圆角效果显示不出来,可以通过引用ie-css3.htc的方法解决. ...

  3. 让boostrap的图片轮播支持滑动效果

    因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果. 然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有 ...

  4. 鸿雁电器oa系统中决策支持模块效果

    公司简介鸿雁电器是国内著名的建筑电器产品的生产.经营企业,同时也是国家863计划CIMS(计算机集成制造系统)应用工程示范企业.浙江省高新技术企业.浙江省专利示范企业和杭州市信息化试点企业.企业系统泛 ...

  5. [Flutter] 支持描边效果的Text

    新版的flutter已经自带这个功能了.TextSyle 中一个shadow . 目前flutter中没找到很好的办法给Text增加描边.自己扩展了一个TextEx,可以实现简单的描边效果,能满足大部 ...

  6. 使控件具有 Tilt 效果

    步骤1:添加类: /* Copyright (c) 2010 Microsoft Corporation. All rights reserved. Use of this sample source ...

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

    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

  8. jquery返回顶部，支持手机

    jquery返回顶部,支持手机 效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的 ...

  9. 轻松实现Android,iOS的一个手势动画效果

    先来看效果 这是iOS下的效果,android下完全一致.通过do_GestureView组件和do_Animation组件,deviceone能很容易实现复杂的跨平台纯原生动画效果,这个示例就是通过 ...

随机推荐

  1. Oracle数据库，基础知识

    1.Oracle的五大约束条件: 1 主键  primary key2 外键  foreign key,3 唯一  unique,4 检测  check5 非空  not null 实例运用: -- ...

  2. python 面试

    知识总结 面试(一)

  3. csu 1548(三分)

    1548: Design road Time Limit: 2 Sec  Memory Limit: 256 MBSubmit: 383  Solved: 200[Submit][Status][We ...

  4. [目标检测]RCNN系列原理

    1 RCNN 1.1 训练过程 (1) 训练时采用fine-tune方式: 先用Imagenet(1000类)训练,再用PASCAL VOC(21)类来fine-tune.使用这种方式训练能够提高8个 ...

  5. 深入理解 WordPress 数据库中的用户数据 wp_user

    WordPress 使用 wp_users 数据表存储用户的主要数据,该数据表结构类似于wp_posts 和 wp_comments 数据表,存储的是需要经常访问的用户数据,该数据表的结构以及该数据表 ...

  6. centos修改oracle字符集

    1.首先以sysdba的身份登录上去 conn /as sysdba2.关闭数据库shutdown immediate;3.以mount打来数据库,startup mount4.设置session S ...

  7. JOYOI 西瓜种植 [差分约束系统]

    题目传送门 西瓜种植 题目限制 时间限制 内存限制 评测方式 题目来源 1000ms 131072KiB 标准比较器 Local 题目背景 笨笨:小西瓜,小西瓜~路人甲:不会呀,这西瓜明明就大着啊…… ...

  8. Xamarin 2017.9.13发布更新

     Xamarin 2017.9.13发布更新 Visual Studio 2017更新到15.3.4.其中,Xamarin.Visual更新到4.6.3.4;Xamarin.iOS更新到10.12.3 ...

  9. Tweet信息搜集工具tinfoleak

    Tweet信息搜集工具tinfoleak   推特是国外用户常用的社交网站.通过分析用户发布的推文以及社交活动,可以获取大量的个人信息.Kali Linux新增一款Tweet信息搜索工具tinfole ...

  10. set集合玩法、三目运算

    set是无序的,无法用下标获取值 创建set二种方式 1.第一种 s1=set()   #创建一个空的set,看下面就知道为什么要这么创建一个空的集合 2.第二种 s2={11,22,33,44} # ...