<!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. ubuntu查看mysql版本的几种方法

    ubuntu查看mysql版本的几种方法 mysql 1:在终端下:mysql -V(大写) //代码 $ mysql -V mysql Ver 14.14 Distrib 5.5.46, for d ...

  2. Android: 在onCreate()中获得对象尺寸

    onCreate() 中 View 尚未绘制完成 很多时候,我们需要在某个界面刚刚加载的时候,执行一些对 View 进行操作的代码,通常我们把这些代码放在 Activity 的 onCreate() ...

  3. spring（四）之基于注解（Annotation-based）的配置.md

    注解 这里讲的注解有下面几个 @Autowired @Qualifier(" ") @Genre(" ") @Offline @Resource(name=&q ...

  4. Cookie对象与Session对象-java

    1.Cookie对象 1.1常见的方法 (1)创建Cookie对象,绑定数据 new Cookie(String name, String value) (2)发送Cookie对象 response. ...

  5. Linux 用户篇——用户管理命令之useradd、passwd、userdel、usermod

    一.用户重要,用户管理命令同样重要 用户是Linux系统安全的核心,每个登录Linux系统的用户都会分配相应的权限,这些权限取决于能否访问系统中各种对象.而管理这些用户的相关信息离不开用户管理命令,比 ...

  6. linux crontab 常用时间设置

    时间格式 分钟 小时 日期 月份 周 命令 数字范围 0-59 0-23 1-31 1-12 0-7 echo "hello" >> abc.log 特殊字符的含义 * ...

  7. Hadoop案例（一）之日志清洗

    日志清洗案例 一. 简单解析版 1)需求 去除日志中字段长度小于等于11的日志. 2)输入数据 /Sep/::: +] "-" "Mozilla/4.0 (compati ...

  8. Jquery 实现轮播图

    jq 轮播图 function banner_show(){ var left_btn = $("#banner_tag_left"); //获取左侧单击按钮 var right_ ...

  9. 【caffe-Windows】微软官方caffe之matlab接口配置，以及安装caffe的注意事项

    1.在此之前,记录一下之前的错误,在参考博客[caffe-Windows]caffe+VS2013+Windows+GPU配置+cifar使用进行caffe的安装时,其中的一些步骤可以不做,具体见下图 ...

  10. ubuntu 系统提示升级失败，boot空间不足

    系统提示升级失败,boot空间不足,解决方法: linux 随着系统的升级,会自动攒下好几个内核 执行 uname -a 看下自己当前启动的是哪个内核 dpkg --get-selections |g ...