<!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. Nginx-1.6.3源码安装、虚拟主机

    源码安装nginx cat /etc/redhat-release uname -rm yum install pcre-devel openssl-devel -y rpm -qa pcre pcr ...

  2. LINUX下解决netstat查看TIME_WAIT状态过多问题(转)

    原文连接:www.itokit.com/2012/0516/73950.html # netstat -an|awk '/tcp/ {print $6}'|sort|uniq -c 16 CLOSIN ...

  3. 20180830 安装git时报错，

    安装:https://blog.csdn.net/u013256816/article/details/54743470 解决问题:https://blog.csdn.net/daojibruce/a ...

  4. #include<stdarg.h> 可变参数使用

    今天上计算方法这课时觉得无聊至极,于是拿出C++编程之道来看了看..无意之中看到了#include<stdarg.h> va_list,va_start,va_end等东西,不知是怎么用的 ...

  5. Django admin后台操作

    Django提供自动后台管理应用,简称admin. admin是一个应用,每个Web站点都需要它.admin通过让开发者可以在完成完整的UI之前验证处理数据的代码. 设置admin 打开setting ...

  6. 洛谷 P2639 [USACO09OCT]Bessie的体重问题Bessie's We… 题解

    题目传送门 这也是个01背包,只是装的很... #include<bits/stdc++.h> #define MAXN 45010 using namespace std; int f[ ...

  7. 常用对称加密算法（DES/AES）类（PHP）

    看注释,啥也不说了,欢迎各种跨平台测试! /** * 常用对称加密算法类 * 支持密钥:64/128/256 bit(字节长度8/16/32) * 支持算法:DES/AES(根据密钥长度自动匹配使用: ...

  8. hdu5984

    听说大佬都是看到1.693147就知道是ln(2)+1我是服气的 不过老老实实推的话就看你大一数分/高数是不是学扎实了 令 把L移到右边并两边求导可得,即 令 代入最开始的公式得到 化简可得,得解 # ...

  9. 【JavaWeb开发】初步实现网站应用钉钉扫码登录

    http://blog.csdn.net/baofeidyz/article/details/59059379 版权声明:转载请注明我的个人微信平台 暴沸 目录(?)[+] 写在前面:如果你还不知道钉 ...

  10. [hdu3685]Rotational Painting 凸包 重心

    大致题意: 给出一个多边形,问你有多少种放法可以使得多边形稳定得立在平面上. 先对多边形求重心,在求凸包,枚举凸包的边,如果重心没有在边的范围内,则不行 判断是否在范围内可用点积来判断 #includ ...