css代码:
/*审核遮罩弹窗*/
.popup{z-index:60;}
.popup .content{width:70%;position:absolute;top:50%;left:15%;margin-top:-60px;}
.popup .content .popupBox{width:100%;height:120px;background:rgba(255,255,255,0.9);border-radius:10px;}
.popup .content .popupBox .toptop{width:100%;height:80px;
display:flex;flex-direction:column;align-content:center;justify-content:center;box-sizing: border-box;
border-bottom:1px solid rgba(0,0,0,0.3);text-align:center;}
.popup .content .popupBox .bottom{width:100%;height:40px;text-align:center;
display:flex;flex-direction:column;align-content:center;justify-content:center;}
.popup .content .popupBox .toptop .texttext{font-size:14px;line-height:24px;margin:0 4px;}
.popup .content .popupBox .toptop .btnbtn{font-size:14px;}
Js代码:
;(function($){
$.fn.Xprompt = function(options){
var defaults = {
//各种参数,各种属性
promptText:"222222",
promptBtn:"ok0"
};
var options=$.extend({},defaults,options);
this.each(function(){
//各种功能 //可以理解成功能代码
var promptHtml='';
promptHtml +=['<div class="shade popup">',
' <div class="content">',
' <div class="popupBox">',
' <div class="toptop">',
' <div class="texttext">'+options.promptText+'</div>',
' </div>',
' <div class="bottom">',
' <p class="btnbtn" style="margin:0;">'+options.promptBtn+'</p>',
' </div>',
' </div>',
' </div>',
' </div>'].join("");
$(this).append(promptHtml);
$(".popup .btnbtn").click(function () {
$(this).parents(".popup").remove();
})
});
return this;
};
})(window.jQuery);//此处也可写成(jQuery);
执行方法:
$("section").Xprompt(
{
promptText:"10分钟内只能点击一次",
promptBtn:"ok"
}
);
效果图: