<!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. 以太坊go-ethereum客户端（三）两种全节点启动模式

    这篇博客介绍一下go-ethereum全节点的两种启动模式:主网络快速启动和测试网络快速启动.这也是客户端所提供的两种启动方式,直接拿来使用即可.下面具体介绍一下使用方法. 主网络快速启动 其实,我们 ...

  2. 猜数字游戏的提示（UVa340）

    题目具体描述见:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_prob ...

  3. js获取或设置当前窗口url参数

    直接上代码 // 获取当前窗口url中param参数的值 function get_param(param){ var query = location.search.substring(1).spl ...

  4. 监控属性数组（Observables Arrays ）

    如果你想发现并响应一个对象的改变,就应该用监控属性(observables).如果你想发现并响应一个集合的变化,就该用监控属性数组 (observableArray).监控属性数组在显示或编辑多个值以 ...

  5. d2i_xxx出错

    在生成DER编码是X509_ALGOR类型没有赋值导致,要先new,然后赋值. req_st->req.appKeyReq->appKeyType = X509_ALGOR_new(); ...

  6. 【Java】 奇偶数的判断

    判断方法(奇数): 错误判断方法:通过a%2==1来判断.(原因:负奇数对2取余的结果为-1) 正确判断方法:(1) 通过a%2!=0来判断.                          (2) ...

  7. Socket编程(一)：建立与客户端的连接并接受数据

    我们这里利用Socket在模拟一个客户端与服务器通信,其实客户端与服务端通信就像人与人打电话一样,想要给一个人打电话,我们首先必须要有手机,必须知道对方的手机号码,这里Socket就好比一部手机,而短 ...

  8. 初拾Java（问题二：缺类异常，无法编译）

    昨天,在看JSP页面包含的元素(JSP指令,生命,表达式,动作等)时,拷贝了一个别人的例子来在Myeclipse里运行,结果出现了如下的缺类错误: 多调试两次也会出现如下无法编译的错误: 具体代码如下 ...

  9. Am335x u-boot 启动过程中的系统频率配置

    Am335x的时钟结构分为:ADPLLS和ADPLLLJ 1.ADPLLS用来配置Core_CLK,Dispaly_clk,ARM系统CLK(mpu_clk),DDR PLLs_clk 2.ADPLL ...

  10. java8新特性——四大内置核心函数式接口

    在前面几篇简单介绍了一些Lambda表达式得好处与语法,我们知道使用Lambda表达式是需要使用函数式接口得,那么,岂不是在我们开发过程中需要定义许多函数式接口,其实不然,java8其实已经为我们定义 ...