网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一个非常小(压缩后约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
});
});
转载请注明来源:时尚可定制的jQuery弹出模态框插件
本文永久链接地址:https://www.moyouyouw.cn/code/964.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论