时尚可定制的jQuery弹出模态框插件

演示  website 下载

插件介绍

这是一个非常小（压缩后约2kb）但功能强大的jQuery插件，可以在网站上轻松快速地创建模态框。在页面上应用一个覆盖蒙版，然后打开一个可定制的弹出模态框。特征：轻巧易用，支持多模式窗口，跨浏览器，你可以把任何html内容放在modals中，比如图像、文本、视频、iframe等。

使用方法

1.自定义弹出模态html布局代码。

<div class="overlay"></div>
<div id="modal1" class="modal">
<p class="closeBtn">关闭</p>
<h2>自定义的内容</h2>
</div>

2. 模态框css样式文件。

.overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: none;
}

.modal {
  display: none;
  background: #eee;
  padding: 0 20px 20px;
  overflow: auto;
  z-index: 1001;
  position: absolute;
  width: 500px;
  min-height: 300px;
}

3. 在页面中加载最新jQuery库和模态框js插件文件。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script type='text/javascript' src='js/jquery.modal.js'></script> 

4.插件默认配置项。

$(document).ready(function(){
    $('.modalLink').modal({
        trigger: '.modalLink',          // id or class  
        olay:'div.overlay',             // id or class  
        modals:'div.modal',             // id or class  
        animationEffect: 'slideDown',   // 蒙版效果|向下滑动或fadeIn |默认值=fadeIn
        animationSpeed: 400,            // 速度（毫秒）|默认值=400
        moveModalSpeed: 'slow',         // 调整窗口大小时模式移动的速度 | slow or fast | default=false
        background: 'a2d3cd',           // 背景色
        opacity: 0.7,                   // 模态不透明度 |  0 - 1 | default = 0.8
        openOnLoad: false,              // 页面加载时打开模态 | true or false | default=false
        docClose: true,                 // 单击“文档”关闭 | true or false | default=true    
        closeByEscape: true,            // 按escape键关闭模态 | true or false | default=true
        moveOnScroll: true,             // 滚动窗口时移动模态 | true or false | default=false
        resizeWindow: true,             // 调整窗口大小时移动模态 | true or false | default=false
        video: '',    //视频的url
        videoClass:'video',             // 视频元素类别
        close:'.closeBtn'               // id or class  
    });
});