jquery插件:弹窗

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"
                }
        );

效果图:





  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值