Remodal 简单使用

最新推荐文章于 2021-11-04 09:16:25 发布

weixin_30845171

最新推荐文章于 2021-11-04 09:16:25 发布

阅读量418

点赞数

原文链接：http://www.cnblogs.com/dougest/p/6669978.html

版权

http://www.yyyweb.com/demo/page-transitions/ ->>>

Web 开发中很实用的10个效果【源码下载】

http://www.yyyweb.com/377.html

8个前沿的 HTML5 & CSS3 效果【附源码下载】

最近项目中用了模态框,感觉比较帅,所以纪念一下,先上效果图

那个X是有点尴尬,就当没看见了咯

首先他是一个插件,

下载地址: http://www.yyyweb.com/ctools/download.php?target=https%3A%2F%2Fgithub.com%2FVodkaBears%2FRemodal%2Farchive%2Fmaster.zip

下载之后解压

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被定义了动画特性,附上连接自己看: http://www.w3school.com.cn/css3/css3_animation.asp

其中-moz代表firefox浏览器私有属性


-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性

transform :属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

连接 http://www.w3school.com.cn/cssref/pr_transform.asp

opacity:设置 div 元素的不透明级别

连接: http://www.w3school.com.cn/cssref/pr_opacity.asp

所有浏览器都支持 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是区分大小写的！

来源： https://zhidao.baidu.com/question/2053219733224419627.html

找到这些属性,就可以进行下一步操作了

@-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>

<html lang="en">

<head>

<title>Remodal example</title>

<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>

<a href="#modal">Modal №1</a><br>

<a href="#modal2">Modal №2</a>

</div>

<div>

<h2 id="modal1Title">Remodal</h2>

this is text and content

</p>

</div>

<br>

<button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>

</div>

<div>

<h2 id="modal2Title">Another one window</h2>

Hello!

</p>

</div>

<br>

<button data-remodal-action="confirm" class="remodal-confirm">Hello!</button>

</div>

// window.REMODAL_GLOBALS = {

// NAMESPACE: 'remodal',

// DEFAULTS: {

// hashTracking: true,

// closeOnConfirm: true,

// closeOnCancel: true,

// closeOnEscape: true,

// closeOnOutsideClick: true,

// modifier: ''

// }

// };

</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>

其实也不用多讲,看一眼就会了................................

暂时用到这里...............

转载于:https://www.cnblogs.com/dougest/p/6669978.html

weixin_30845171

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Remodal 简单使用

http://www.yyyweb.com/demo/page-transitions/ ->>>Web 开发中很实用的10个效果【源码下载】http://www.yyyweb.com/377.html8个前沿的 HTML5 & CSS3 效果【附源码下载】最近项目中用了模态框,感觉比较帅,所以纪念一下,先上效果图...
复制链接

扫一扫