您的位置: 首页  >  IT文章  >  pc端弹框

pc端弹框

分类: IT文章 • 2023-10-30 15:42:18

pc弹框插件：http://aui.github.io/artDialog/doc/index.html#quickref-bubble

PC端，手机端，layui很好用，分页啥的：http://www.layui.com/demo/

手机弹框插件：

小弹框：

<div id="message" class=""><p id="msgTxt"></p></div>




        function message(message){
            //加蒙层，和大弹框一致，可以单独设计
            // $("body").append("<div class='md-modal-overlay show' id='nyale'></div>");
            var timer;
            var ele = $( "#message" ).addClass( "show" );
            $( "#msgTxt" ).html( message );

            clearTimeout( timer );

            timer = setTimeout( function() {
                ele.removeClass( "show" );
                //小弹框关闭，蒙层撤销
                // $("#nyale").remove();
            }, 3000 );
            
        }



message("网络开小差，请稍后再试")



/*小弹框*/
#message{
     9.55rem;
    height: 3.1rem;
    /*line-height: 1.55rem;*/
    bottom: 50%;
    border-radius: 1px;
    padding: 1em 1em;
    font-size: .9em;
    color: #fff;
    z-index: 99;
    box-shadow: 0 1px 14px rgba(0,0,0,.24);
    /*white-space: nowrap;*/
    opacity: 0;
    visibility: hidden;
    /*-webkit-transition: opacity .2s;*/
    /*transition: opacity .2s;*/
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    text-align: center;
    font-size: 16px;
    border-radius: 6px;
}
#message.show {
    visibility: visible;
    opacity: 1;
}
#loading, #message {
    position: fixed;
    background: rgba(0,0,0,.6);
    left: 50%;
}
#msgTxt{
    line-height:1.55rem;
    height: 3.1rem;
}
.show {
    display: block!important;
}
/*小弹框结束*/




//蒙层
.md-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
     100%;
    height: 100%;
    background: rgba(70,60,60,.5);
    opacity: 0;
    visibility: hidden;
    z-index: 99;
    -webkit-transition: all .3s;
    transition: all .3s
}

.md-modal-overlay.blank,.md-modal-overlay.show {
    opacity: 1;
    visibility: visible
}

.md-modal-overlay.blank {
    background: 0 0
}

大弹框

<modal id="modal_fellSorry">
            <div style=" 13.45rem;height: 7.6rem;background-color: #fff;overflow: hidden;border-radius: 0.1rem;">
                <img src="/cn.dingyueWeb.reader/activity/imgs/imh10qm_meiqiangdao_top.png" style=" 9.3rem;height: 4.05rem;display: block;margin:0.75rem auto;">
                <img src="/cn.dingyueWeb.reader/activity/imgs/imh10qm_meiqiangdao_btn.png" style=" 4.725rem;height: 1.05rem;display: block;margin:0 auto;" class="okok">
            </div>
        </modal>
        <modal id="modal_getSuccess">
            <div style=" 13.45rem;height: 7.6rem;background-color: #fff;overflow: hidden;border-radius: 0.1rem;">
                <img src="/cn.dingyueWeb.reader/activity/imgs/img11_qiangdaole_top.png" class="qgl_top">
                <p style="margin-bottom: 0.75rem;text-align: center;color:#2d2dfd;" id="getSuccessTxt">抢到了！书券已放入账户</p>
                <img src="/cn.dingyueWeb.reader/activity/imgs/imh10qm_meiqiangdao_btn.png" style=" 4.725rem;height: 1.05rem;display: block;margin:0 auto;" class="okok">
            </div>
        </modal>






        function fellSorry(){
            $.modal({
                    showTitle: false,
                    class4modal: "modal-confirm",
                    animation: "scale",
                    render: function(ready, close) {
                        this.html($("#container").find("#modal_fellSorry").html());
                        this.delegate(".okok", "click touch", function(e) {
                            close();
                            //关闭弹窗显示已抢光
                            $("#qiangGuangle").show();
                            $("#guize").hide();
                            $("#lingqu").hide();
                            $("#yiguoqi").hide();
                        })
                        .delegate(".nono", "click touch", close);
                    }
                });
        }

        function getSuccess(val){
            $.modal({
                    showTitle: false,
                    class4modal: "modal-confirm",
                    animation: "scale",
                    render: function(ready, close) {
                        $("#getSuccessTxt").html("抢到了！"+val+"书券已放入账户");
                        this.html($("#container").find("#modal_getSuccess").html());
                        this.delegate(".okok", "click touch", function(e) {
                            /*var webUrl = window.J_search.buildPurchaseAjaxUrl("/${packageName}/v3/recommend/payBook.do?params=1");
                            window.title = '精选';
                            window.location.href = webUrl;*/
                            close();
                            window.location.reload();
                        })
                        .delegate(".nono", "click touch", close);
                    }
                });
        }

大弹框css

modal {
    display: none
}

.md-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    height: auto;
    min-width: 240px;
    max-width: 90%;
    max-height: 90%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 100;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    font-size: .7rem;
    /* 50%*/
}

.md-modal .md-progress .md-progress-spinner {
    top: 54px;
    right: 14px
}

.md-modal>div {
    position: relative;
    margin: 0 auto;
    background: #fff;
    overflow: hidden
}

.md-modal-head {
    margin: 0;
    padding: 16px 16px 16px 24px;
    font-size: 17px;
    font-weight: 300;
    text-align: left;
    color: #fff;
    background: #01a1df;
    opacity: 1
}

.md-modal-content {
    max-height: 480px;
    padding: 24px;
    overflow: auto
}

.md-modal-body {
    position: relative;
    overflow: hidden
}

.md-modal-action {
    min-height: 52px;
    padding: 0 24px;
    margin-bottom: 0;
    line-height: 52px;
    border-top-color: rgba(0,0,0,.12);
    overflow: hidden
}

.md-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    border: none;
    font-size: 24px;
    color: #eee;
    cursor: pointer;
    z-index: 100;
    -webkit-transition: .2s;
    transition: .2s
}

.md-modal-close:hover {
    color: #48cfad;
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg)
}

.md-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(70,60,60,.5);
    opacity: 0;
    visibility: hidden;
    z-index: 99;
    -webkit-transition: all .3s;
    transition: all .3s
}

.md-modal-overlay.blank,.md-modal-overlay.show {
    opacity: 1;
    visibility: visible
}

.md-modal-overlay.blank {
    background: 0 0
}

.md-modal-animation-bottom-slide>div,.md-modal-animation-bottom>div,.md-modal-animation-fadein>div,.md-modal-animation-flip>div,.md-modal-animation-scale>div,.md-modal-animation-sign>div,.md-modal-animation-slide>div,.md-modal-animation-stick>div,.md-modal-animation-vertical>div {
    opacity: 0;
    -webkit-transition: all .3s;
    transition: all .3s
}

.md-modal-animation-bottom-slide.show>div,.md-modal-animation-bottom.show>div,.md-modal-animation-fadein.show>div,.md-modal-animation-flip.show>div,.md-modal-animation-scale.show>div,.md-modal-animation-sign.show>div,.md-modal-animation-slide.show>div,.md-modal-animation-stick.show>div,.md-modal-animation-vertical.show>div {
    opacity: 1;
    visibility: visible
}

.md-modal-animation-bottom-slide {
    top: auto;
    bottom: 0;
    left: 0;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
}

.md-modal-animation-bottom-slide>div {
    -webkit-transform: translateY(30%);
    -ms-transform: translateY(30%);
    transform: translateY(30%)
}

.md-modal-animation-bottom-slide.show>div {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

.md-modal-animation-slide>div {
    -webkit-transform: translateY(30%);
    -ms-transform: translateY(30%);
    transform: translateY(30%)
}

.md-modal-animation-slide.show>div {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

.md-modal-animation-scale>div {
    -webkit-transform: scale(.4);
    -ms-transform: scale(.4);
    transform: scale(.4)
}

.md-modal-animation-scale.show>div {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    border-radius: 0.25rem;
}

.md-modal-animation-fadein {
    overflow: hidden
}

.md-modal-animation-fadein>div {
    visibility: hidden;
    opacity: .4
}

.md-modal-animation-fadein.show>div {
    visibility: visible;
    opacity: 1
}

.md-modal-animation-stick {
    top: 0;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

.md-modal-animation-stick>div {
    -webkit-transform: translateY(-200%);
    -ms-transform: translateY(-200%);
    transform: translateY(-200%)
}

.md-modal-animation-stick.show>div {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

.md-modal-animation-flip {
    -webkit-perspective: 1300px;
    perspective: 1300px
}

.md-modal-animation-flip>div {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(-70deg);
    transform: rotateY(-70deg)
}

.md-modal-animation-flip.show>div {
    -webkit-transform: rotateY(0);
    transform: rotateY(0)
}

.md-modal-animation-vertical {
    -webkit-perspective: 1300px;
    perspective: 1300px
}

.md-modal-animation-vertical>div {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(-70deg);
    transform: rotateX(-70deg)
}

.md-modal-animation-vertical.show>div {
    -webkit-transform: rotateX(0);
    transform: rotateX(0)
}

.md-modal-animation-sign {
    -webkit-perspective: 1300px;
    perspective: 1300px
}

.md-modal-animation-sign>div {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(-60deg);
    transform: rotateX(-60deg);
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0
}

.md-modal-animation-sign.show>div {
    -webkit-transform: rotateX(0);
    transform: rotateX(0)
}

.md-modal-animation-bottom {
    -webkit-perspective: 1300px;
    perspective: 1300px
}

.md-modal-animation-bottom>div {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateY(100%) rotateX(90deg);
    transform: translateY(100%) rotateX(90deg);
    -webkit-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    transform-origin: 0 100%
}

.md-modal-animation-bottom.show>div {
    -webkit-transform: translateY(0) rotateX(0);
    transform: translateY(0) rotateX(0)
}

大弹框js

    $.fn.modal = function( options ) {

        var

        template = [ "<div class='md-modal'>",
                    "<div style='height: 100%;'>",
                        "<div class='md-modal-head'></div><div class='icon-md-clear md-modal-close'></div>",
                        "<div class='md-modal-body'></div>",
                    "</div>",

                "</div>",
                "<div class='md-modal-overlay'></div>" ].join( "" ),

        modal = $( template ),

        close = function() {
            $( document ).off( "keyup", closeByESC ).off( "click", closeByDocument );

            options.onClose();
            modal.removeClass( "show" );
            setTimeout( function() { modal.remove(); }, 300 );
        },

        closeByESC = function( e ) {
            27 === e.keyCode && close();
        },

        closeByDocument = function( e ) {
            $( e.target ).hasClass( "md-modal-overlay" ) && close();
        },

        deferred = $.Deferred(),

        show = function() {

            var
              head = modal.find( ".md-modal-head" ),
              body = modal.find( ".md-modal-body" ),
              overlay = modal.last();

            /** ~Head~ */
            options.showTitle ? head.html( options.title ) : head.hide().next().hide();

            /** ~Body~ */
            if ( options.render instanceof Function ) {
                options.render.call( body, deferred, close );
            } else {
                body.html( options.render );
                deferred.resolve();
            }

            modal.first().addClass( [ "md-modal-animation-" + options.animation, options.class4modal || "" ].join( " " ) );

            /** Show the overlay */
            overlay.addClass( options.mask ? "show" : "blank" );

            /** Close the modal */
            if ( options.closeByESC || options.closeByDocument ) {

                var trigger = $( document ).add( modal );

                true === options.closeByDocument
                    && modal.off( "click", closeByDocument ).on( "click", closeByDocument );

                if ( "boolean" === typeof options.closeByESC ) {
                    trigger.off( "keyup", closeByESC ).on( "keyup", closeByESC );
                }
            }

            modal.delegate( ".md-modal-close", "click", close );

            setTimeout( function() {
                modal.first().addClass( "show" );
            }, 100 );

            if ( options.draggable ) {

                var handle = options.draggable;

                head.css( "cursor", "move" );

                modal.drag( function( ev, dd ) {

                    $( this ).css( {
                        top: dd.offsetY,
                        left: dd.offsetX,
                        "width": modal.width(),
                        "height": modal.height(),
                        "-webkit-transform": "none",
                        "-moz-transform": "none",
                        "-ms-transform": "none",
                        "transform": "none",
                    } );
                }, { handle: handle === true ? ".md-modal-head" : handle } );
            }

            modal.appendTo( document.body );
        };

        options = $.extend( {}, $.fn.modal.defaults, options || {} );

        if ( this === $ ) {
            options.target ? $( options.target ).on( "click", show ) : (options.autoShow && show());
        /** Use a dom as trigger */
        } else this.on( "click", show );

        return {
            open: show,
            close: close,
            $node: modal
        };
    };

    $.fn.modal.defaults = {

        title             : "Modal",
        showTitle         : true,
        mask            : true,
        draggable       : false,

        class4modal     : "",

        closeByESC         : true,
        closeByDocument : false,

        animation         : "slide",
        render             : "",

        autoShow         : true,
        onClose         : $.noop || new Function()
    };

    /** Export to $ */
    $.modal = $.fn.modal;

相关推荐