->>>
最近项目中用了模态框,感觉比较帅,所以纪念一下,先上效果图
那个X是有点尴尬,就当没看见了咯
首先他是一个插件,
下载地址:
下载之后解压
dist中放了你要使用的css和js
examples存放了demo,可以直接贴过来用,简单方便
找到examples下的index-zepto.html,用chrome打开
点开 Modal №1效果如下:
Modal №2 效果如下:
在原版中的模态框弹出效果是平白无故出现的,我也不知道怎么形容这个平白无故什么意思,就好比隐身的东西突然现身
而在项目中我需要从底部划出的效果,这里我们就从他的css下手
打开
第4个css,找到190多行的@keyframes remodal-opening-keyframes或者@-webkit-keyframes remodal-opening-keyframes
在css3中,@keyframes被定义了动画特性,附上连接自己看:
其中-moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性 -webkit代表chrome、safari私有属性
transform :属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
连接
opacity:设置 div 元素的不透明级别
连接:
所有浏览器都支持 opacity 属性。
注释：IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。
filter在w3c中没有介绍,就在网上找了点资料补充下
CSS中的filter滤镜功能介绍： CSS静态滤镜样式 （filter）（只有IE4.0以上支持） CSS静态滤镜样式的使用方法：{ filter : filtername( parameters1,parameters2,...) } Filter样式 简要说明 支持参数 alpha 设置图片或文字的不透明度 opacity、finishOpacity、style、startX、startY、finishX、finishY、add、direction、strength blur 在指定的方向和位置上产生效果 add、direction、strength chroma 对所选择的颜色进行透明处理 color dropShadow 在指定的方向和位置上产生阴影 color、offX、offY、positive flipH 沿水平方向翻转对象 flipV 沿垂直方向翻转对象 glow 在对象周围上发光 color、strength gray 将对象以灰度处理 invert 逆转对象颜色 light 对对象进行模拟光照 mask 对对象生成掩膜 color shadow 沿对象边缘产生阴影 color、direction wave 在垂直方向产生正弦波形 add、freq、lightStrength、phase、strength xray 改变对象，并绘制黑白图象 以上就是静态滤镜的全部内容，要注意的是CSS是区分大小写的！
来源：
找到这些属性,就可以进行下一步操作了
@-webkit-keyframes remodal-opening-keyframes {
from {
/* -webkit-transform: scale(1.05);
transform: scale(1.05);
opacity: 1; */
bottom:-800px;
}
to {
/* -webkit-transform: none;
transform: none;
opacity: 1;
-webkit-filter: blur(0);
filter: blur(0); */
bottom:-210px;
}
} 这就从底部划出了,哈哈哈哈.................
如果划出的效果比好,根据以上自动调节...............
*********************分割线****************************************
接下来讲js的用法
先贴html
<!DOCTYPE html>
<!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Remodal example</title>
<meta name="description" content="Remodal example">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../dist/remodal.css">
<link rel="stylesheet" href="../dist/remodal-default-theme.css">
<style>
/*.remodal-bg.with-red-theme.remodal-is-opening,
.remodal-bg.with-red-theme.remodal-is-opened {
filter: none;
}
.remodal-overlay.with-red-theme {
}
.remodal.with-red-theme {
background: #fff;
}*/
</style>
</head>
<body>
<div class="remodal-bg">
<a href="#modal">Modal №1</a><br>
<a href="#modal2">Modal №2</a>
<br><br>
</div>
<div class="remodal" data-remodal-id="modal" role="dialog" aria-labelledby="modal1Title" aria-describedby="modal1Desc">
<button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
<div>
<h2 id="modal1Title">Remodal</h2>
<p id="modal1Desc">
this is text and content
</p>
</div>
<br>
<button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
<button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>
<div data-remodal-id="modal2" role="dialog" aria-labelledby="modal2Title" aria-describedby="modal2Desc">
<div>
<h2 id="modal2Title">Another one window</h2>
<p id="modal2Desc">
Hello!
</p>
</div>
<br>
<button data-remodal-action="confirm" class="remodal-confirm">Hello!</button>
</div>
<!-- You can define the global options -->
<script>
// window.REMODAL_GLOBALS = {
// NAMESPACE: 'remodal',
// DEFAULTS: {
// hashTracking: true,
// closeOnConfirm: true,
// closeOnCancel: true,
// closeOnEscape: true,
// closeOnOutsideClick: true,
// modifier: ''
// }
// };
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.4/zepto.js"></script>
<script>window.Zepto || document.write('<script src="../libs/zepto/zepto.min.js"><\/script>')</script>
<script src="../dist/remodal.js"></script>
<!-- Events -->
<script>
$(document).on('opening', '.remodal', function () {
// console.log('opening');
});
$(document).on('opened', '.remodal', function () {
// console.log('opened');
});
$(document).on('closing', '.remodal', function (e) {
// console.log('closing' + (e.reason ? ', reason: ' + e.reason : ''));
});
$(document).on('closed', '.remodal', function (e) {
// console.log('closed' + (e.reason ? ', reason: ' + e.reason : ''));
});
$(document).on('confirmation', '.remodal', function () {
// console.log('confirmation');
});
$(document).on('cancellation', '.remodal', function () {
// console.log('cancellation');
});
$('[data-remodal-id=modal2]').remodal({
modifier: 'with-red-theme'
});
</script>
</body>
</html>
其实也不用多讲,看一眼就会了................................
暂时用到这里...............