<!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. （总结）MySQL自带的性能压力测试工具mysqlslap详解

    PS:今天一同事问我有木有比较靠谱的mysql压力测试工具可用.其实mysql自带就有一个叫mysqlslap的压力测试工具,还是模拟的不错的.下面举例说说.mysqlslap是从5.1.4版开始的一 ...

  2. 关于IdByName 为什么一个消息主题要有 Id和 Name的解释

  3. Python中列表的各种方法

    列表是Python中一种常用的存储信息的方式,所以要熟练掌握列表的各种方法: 首先我们定义一个列表(name),然后练习里面的各种方法: >>> name = ["Sora ...

  4. 4. CMake 系列 - 项目添加编译选项

    目录 1. 项目目录结构 2. 相关代码 2.1 add 模块 2.2 sub 模块 2.3 example 模块 2.4 顶层 CMakeLists.txt 3. 配置&编译 1. 项目目录 ...

  5. run-time setting 中设置simulate browser cache 选项详解

    Browser  Emulation: Simulate  browser  cache:配置Vuser模拟带缓存的浏览器.缺省缓存是被允许的, 可以通过禁止该选项来使得所有VUser模拟的浏览器都不 ...

  6. 快速搭建sonar代码质量管理平台

    安装 下载,直接解压http://www.sonarqube.org/downloads/ 添加mysql驱动至\extensions\jdbc-driver\mysql\ 创建mysql数据库和用户 ...

  7. 500 多个 Linux 命令文档搜索

    500 多个 Linux 命令文档搜索 搜索界面:https://wangchujiang.com/linux-command/ 源码:https://github.com/jaywcjlove/li ...

  8. HTML5 Canvas游戏开发（一）基础知识

    一.绘制基本图形 在每次用canvas画布时,都有几步是“套路” 1.在HTML中创建Canvas画布: <canvas id="mycanvas" width=" ...

  9. 洛谷P2408 不同字串个数 [后缀数组]

    题目传送门 不同字串个数 题目背景 因为NOI被虐傻了,蒟蒻的YJQ准备来学习一下字符串,于是它碰到了这样一道题: 题目描述 给你一个长为N的字符串,求不同的子串的个数 我们定义两个子串不同,当且仅当 ...

  10. Android升级ADT22后会报ClassNotFoundException的原因分析

    http://blog.csdn.net/huzgd/article/details/8962702 1.ADT16下,只要add to path就是add to path并export:2.ADT2 ...