如何将JQuery模态框改写为长尾词？

本文共计760个文字，预计阅读时间需要4分钟。

原文示例：本文分享了大家自定义模式框架效果的总体代码，供大家参考。重点：+ 基于jQuery，也可构造原生模式框架 + 功能：1、可以自定义模式框架的宽高等一系列样式

改写后：本文展示了如何使用jQuery自定义模式框架，并提供了相关代码示例。要点：+ 基于jQuery，可构建原生模式框架 + 功能：1、自定义框架尺寸等样式

本文实例为大家分享了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)     }) })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。