纯js响应式模态窗口和弹出层插件MODALit


源码介绍

简要教程

MODALit是一款纯js响应式模态窗口和弹出层插件。MODALit可以用于制作lightbox,模态窗口,对话框和弹出层等。MODALit插件的特点还有:

  • 支持6种动画过渡效果:zoom, flip, slide left/right/down/up。
  • 支持3种尺寸的对话框:small, large 和 full。
  • 支持图片和视频,视频格式包括:Youtube/Dailymotion/Vimeo/mp4/m4v/ogg/ogv/webm。
  • 支持嵌套的弹出层效果。
  • 可用于替代浏览器默认的对话框和提示框。

安装

可以通过bower和npm来安装MODALit插件。

bower install MODALit
npm install modalit                  
                

使用方法

在页面中引入MODALit.min.css和MODALit.min.js文件。

<link rel="stylesheet" href="path/to/MODALit.min.css">
<script src="path/to/MODALit.min.js"></script>            
                

由于IE9不支持CSS3动画,如果需要支持IE9,需要添加下面的代码。

<!--[if IE 9]>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/classlist/2014.01.31/classList.min.js"></script>
<![endif]-->          
                
HTML结构

要生成一个最简单对话框的HTML结构如下:

<!-- The simplest -->
<button type="button" data-title="title" data-content="Content" data-toggle="modal">Modal Open</button>
                   
<!-- Sets modal target -->
<button type="button" id="button" data-target="#modal">Modal Open</button>

<div id="modal" class="modalit" aria-hidden="true">
    <div class="dialog">
        <header>
            <h3>Title</h3>
        </header>
        <div class="content">
            <p>Content</p>
        </div>
        <footer>
            <button type="button" data-modal-btn="dismiss" class="btn primary">Close</button>
        </footer>
    </div>
</div>             
                
初始化插件

在页面DOM元素加载完毕置换后,通过下面的方法来初始化插件。

// The simplest
var modal = new MODALit();

// Sets modal target
var modal = new MODALit({
    el: '#button'
});               
                

MODALit纯js响应式模态窗口和弹出层插件的github地址为:https://github.com/knot-design/MODALit



点赞(0) 打赏

立即下载

点击下载

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部