• 最近总想着写一个模拟alert和confirm插件,代替原生的


    msgbox-confirm

    github:  https://github.com/tong-mikasa/msgbox-confirm

    主要js代码,scss代码

    (function($) {
        $.MsgBox = {
            Alert: function (title, msg, callback) {
                this._generateMsgboxHtml("alert", title, msg);
                //$("body").append(Handlebars.compile(this._tplMsgHtm)({type: "alter", title: title, msg: msg}));
                this._btnMsgOk(callback);
            },
            Confirm: function (title, msg, callback,cancelCallback) {
                this._generateMsgboxHtml("confirm", title, msg);
                //$("body").append(Handlebars.compile(this._tplMsgHtm)({type: "confirm", title: title, msg: msg}));
                this._btnMsgOk(callback);
                this._btnMsgNo(cancelCallback);
            },
            CustomizeConfirm: function (title, msg, leftButtonText,rightButtonText,callback,cancelCallback) {
                this._generateMsgboxHtml("confirm", title, msg,leftButtonText,rightButtonText);
                //$("body").append(Handlebars.compile(this._tplMsgHtm)({type: "confirm", title: title, msg: msg}));
                this._btnMsgOk(callback);
                this._btnMsgNo(cancelCallback);
            },
            _tplMsgHtm: $("#tpl_confirm_msgbox").html(),
            _btnMsgOk: function(callback) {
                var that = this;
                $("#msg_btn_ok").click(function () {
                    that._removeMsgboxPopupWrap();
                    if (callback && typeof (callback) == 'function') {
                        callback();
                    }
                });
            },
            _btnMsgNo: function(cancelCallback) {
                var that = this;
                $("#msg_btn_no").click(function () {
                    that._removeMsgboxPopupWrap();
                    if (cancelCallback && typeof (cancelCallback) == 'function') {
                        cancelCallback();
                    }
                });
            },
            _generateMsgboxHtml: function (type, title, msg,leftButtonText,rightButtonText) {
    
                var okButtonText = (typeof leftButtonText == "undefined") ? '确定' : leftButtonText
                    , noButtonText = (typeof rightButtonText == "undefined")  ? '取消': rightButtonText;
    
                var strHtm ='<div class="confirm-msgbox-popup-wrap">' +
                    '            <div class="confirm-mask-bg"></div>' +
                    '            <div id="confirm_content_wrap">' +
                    '                <div class="msg-in">' +
                    '                    <div id="msg_header" class="text-center">' +
                    '                        <span id="msg_title">'+title+'</span>' +
                    '                    </div>' +
                    '                    <div id="msg_msg" class="text-center">' + msg + '</div>' +
                    '                    <div id="msg_btn_wrap" class="text-center">';
    
                if(type == "alert")
                {
                    strHtm += '<span id="msg_btn_ok" class="msg-btn cursor-point col-full">'+okButtonText+'</span>';
                }
    
                if(type == "confirm"){
                    strHtm += '<span id="msg_btn_ok" class="msg-btn cursor-point col-half">'+okButtonText+'</span>';
                    strHtm +='<span id="msg_btn_no" class="msg-btn cursor-point col-half">'+noButtonText+'</span>';
                }
    
                strHtm +='           </div>' +
                    '                </div>' +
                    '            </div>' +
                    '        </div>';
    
                this._removeMsgboxPopupWrap();
                $("body").append(strHtm);
            },
            _removeMsgboxPopupWrap: function(){
                $(".confirm-msgbox-popup-wrap").remove();
            }
        };
    })(jQuery);
    
    /*
    <script type="text/x-handlebars-template" id="tpl_confirm_msgbox">
        <div class="confirm-msgbox-popup-wrap">
            <div class="confirm-mask-bg"></div>
            <div id="confirm_content_wrap">
                <div class="msg-in">
                    <div id="msg_header" class="text-center">
                        <span id="msg_title">{{title}}</span>
                    </div>
                    <div id="msg_msg" class="text-center">
                        {{msg}}
                    </div>
                    <div id="msg_btn_wrap" class="text-center">
    
                        {{#ifCond type '==' 'alert'}}
                        <span id="msg_btn_ok" class="msg-btn cursor-point col-full">xxx</span>
                        {{/if}}
    
                        {{#ifCond type '==' 'confirm'}}
                        <span id="msg_btn_ok" class="msg-btn cursor-point col-half">xxx</span>
                        <span id="msg_btn_no" class="msg-btn cursor-point col-half">xxx</span>
                        {{/ifCond}}
                    </div>
                </div>
            </div>
        </div>
    </script>
    */

      

    .confirm-msgbox-popup-wrap{
        position: fixed;
        left: 0;
        top: 0;
        z-index: 9990;
         100%;
        height: 100%;
        .col-full{
             100%;
        }
        .col-half{
             50%;
        }
        .cursor-point{
            cursor: pointer;
        }
        .confirm-mask-bg{
            position: absolute;
            z-index: 9991;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.8);
        }
        #confirm_content_wrap{
            position: absolute;
            z-index: 9999;
            left: 50%;
            top: 50%;
             400px;
            height: 250px;
            margin: -125px 0 0 -200px;
    
            .msg-in{
                background: #ffffff;
                border-radius: 14px;
                -webkit-border-radius: 14px;
                -moz-border-radius: 14px;
            }
            #msg_header{
                padding-top: 15px;
                border-top-left-radius: inherit;
                border-top-right-radius: inherit;
            }
            #msg_title{
                color: #333333;
                text-align: center;
                padding: 10px 0 10px;
                font-size: 20px;
                font-weight: bold;
            }
            #msg_msg{
                color: #000000;
                padding: 20px;
                vertical-align: middle;
                font-size: 16px;
                line-height: 1.4;
                max-height: 100px;
                overflow-y: auto;
            }
            #msg_btn_wrap{
                border-top: 1px solid #e6e6e5;
            }
            .msg-btn{
                padding-top: 12px;
                padding-bottom: 12px;
                display: inline-block;
                font-size: 15px;
                color: #ffffff;
                border: none;
                border-right: 1px solid #e6e6e5;
    
                &:last-child{
                    border: none;
                }
            }
            #msg_btn_ok{
                color: #0079FF;
            }
            #msg_btn_no{
                color: rgba(0, 0, 0, 0.9);
            }
        }
    }
    
    
    @media screen and (max- 1000px) {
        .confirm-msgbox-popup-wrap{
            #confirm_content_wrap{
                left: 10%;
                right: 10%;
                 auto;
                margin: -125px 0 0 0;
    
                #msg_title{
                    font-size: 30px;
                }
    
                #msg_msg{
                    padding: 30px;
                    font-size: 28px;
                }
                .msg-btn{
                    padding-top: 20px;
                    padding-bottom: 20px;
                    font-size: 28px;
                }
            }
        }
    }
    

      

  • 相关阅读:
    [FJOI2007]轮状病毒
    [SHOI2013]发微博
    ATCODER ABC 099
    [HEOI2015]兔子与樱花
    [TJOI2017]可乐
    [TJOI2015]线性代数
    [Ceoi2008]order
    [CTSC2008]祭祀river
    [POI2009]Lyz
    数列分块(数据结构)学习笔记
  • 原文地址:https://www.cnblogs.com/tonnytong/p/9258421.html
Copyright © 2020-2023  润新知