帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

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

帝国模板之家 2020-12-16 网页特效 评论

插件介绍

这是一个非常小(压缩后约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  
    });
});
只要可以深入到所处的环境,相信美好一定会从那里产生。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言