zoukankan      html  css  js  c++  java
  • 最近总想着写一个模拟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;
                }
            }
        }
    }
    

      

  • 相关阅读:
    Two Sum II
    Subarray Sum
    Intersection of Two Arrays
    Reorder List
    Convert Sorted List to Binary Search Tree
    Remove Duplicates from Sorted List II
    Partition List
    Linked List Cycle II
    Sort List
    struts2结果跳转和参数获取
  • 原文地址:https://www.cnblogs.com/tonnytong/p/9258421.html
Copyright © 2011-2022 走看看