程序员之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → JQuery自定义模态框

JQuery自定义模态框效果

 更新时间：2022年07月05日 08:03:38   作者：new_liu  
这篇文章主要为大家详细介绍了JQuery自定义模态框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）

（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）

本文实例为大家分享了JQuery自定义模态框效果的具体代码，供大家参考，具体内容如下

重点：基于jQuery ，也可改造成原生模态框

功能：

1、可以自定义模态框的宽高等等一系列css样式；
2、关闭、提交都可以执行自定义的回调函数；
3、js和html分离，除了部分带了js功能的class不能遗漏之外，其他的都可自行增减

html代码：

<div class="dialog-tiya" id="voteModal">
? ? <div class="modalBg-tiya"></div>
? ? <div class="customModal-tiya">
? ? ? ? <div class="close"></div>
? ? ? ? <div class="modal-title">
? ? ? ? ? ? 批量投票
? ? ? ? </div>
? ? ? ? <div class="modal-body">
? ? ? ? ? ? <p class="text-center color8bb7f9">是否批量开启所选队伍的投票？</p>
? ? ? ? </div>
? ? ? ? <div class="modal-footer">
? ? ? ? ? ? <div class="button-refer">批量开启</div>
? ? ? ? ? ? <div class="button-cancel">批量关闭</div>
? ? ? ? </div>
? ? </div>
</div>

css代码：

.dialog-tiya{
? ? display:none;
}
.modalBg-tiya {
? ? width: 100%;
? ? height: 100%;
? ? background: rgba(0, 0, 0, 0.3);
? ? position: fixed;
? ? z-index: 2;
? ? left: 0;
? ? top: 0;
}
.customModal-tiya {
? ? position: fixed;
? ? width: 40%;
? ? height: 50%;
? ? z-index: 3;
? ? left: 0;
? ? top: 0;
? ? bottom: 0;
? ? right: 0;
? ? margin: auto;
? ? border-radius: 5px;
? ? padding: 15px;
? ? box-sizing: border-box;
? ? background: #fff;
}
.customModal-tiya .modal-title {
? ? font-size: 18px;
? ? margin: 40px auto;
? ? color:#000;
? ? text-align:center;
}
.customModal-tiya .modal-footer {
? ? position: absolute;
? ? bottom: 15px;
? ? right: 15px;
? ? left: 15px;
? ? text-align: center;
}
.customModal-tiya .modal-footer .button-refer,
.customModal-tiya .modal-footer .button-cancel {
? ? width: 40%;
? ? height: 38px;
? ? line-height: 38px;
? ? text-align: center;
? ? border:1px solid #6893ff;
? ? font-size:16px;
? ? border-radius: 5px;
? ? display: inline-block;
}
.customModal-tiya .modal-footer .button-refer {
? ? margin-right: 10px;
? ? background: #6893ff;
? ? color:#fff;
}
.customModal-tiya .modal-footer .button-cancel {
? ? margin-left: 10px;
? ? color:#6893ff;
}
.customModal-tiya .close{
? ? position:absolute;
? ? right:15px;
? ? top:15px;
? ? width: 22px;
? ? height:22px;
? ? background:#8bb7f9 url("../public/images/gb_icon.png") no-repeat;/*自己换icon*/
? ? background-size:100% 100%;
? ? cursor:pointer;
}
.customModal-tiya .modal-body{
? ? font-size:18px;
}
.text-center{
? ? text-align:center;
}
.color8bb7f9{
? ? color:#8bb7f9;
}

modal.js:

function CustomModal(ele,options,callback){
? ? this.ele = ele;
? ? this.init(ele,options,callback);
}
customModal.prototype.init = function(ele,options,callback){
? ? ele.show();
? ? if(options.style){
? ? ? ? var target = ele.find(".customModal-tiya");
? ? ? ? $.each(options.style,function(index,item){
? ? ? ? ? ? target.css(index,item)
? ? ? ? })
? ? }
? ? callback && callback();
? ? if(options.close){
? ? ? ? ele.find(".close").click(function(){
? ? ? ? ? ? ele.hide();
? ? ? ? ? ? options.close && options.close();
? ? ? ? })
? ? }
? ? if(options.submit){
? ? ? ? ele.find(".button-refer").click(function(){
? ? ? ? ? ? ele.hide();
? ? ? ? ? ? options.submit && options.submit();
? ? ? ? })
? ? }
? ? if(options.cancel) {
? ? ? ? ele.find(".button-cancel").click(function(){
? ? ? ? ? ? ele.hide();
? ? ? ? ? ? options.cancel && options.cancel();
? ? ? ? })
? ? }
}

最后一步，调用：

$(function(){
? ? var voteModal = new CustomModal($("#voteModal"),{
? ? ? ? style:{
? ? ? ? ? ? 'min-height':'300px',
? ? ? ? ? ? 'min-width':'600px',
? ? ? ? },
? ? ? ? close:function(){
? ? ? ? ? alert(2)
? ? ? ? },
? ? ? ? submit:function(){
? ? ? ? ? ? alert(3)
? ? ? ? },
? ? ? ? cancel:function(){
? ? ? ? ? ? alert(4)
? ? ? ? }},function(){
? ? ? ? alert(1)
? ? })
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持程序员之家。

您可能感兴趣的文章:

相关文章

最新评论

?


http://www.vxiaotou.com