将点击模式更改为加载时间延迟

时间：2017-08-03 04:39:55

标签： jquery modal-dialog

我有这个简单的模态插件，我下载（并且条纹化），因为我正在尝试学习这些功能。

我想知道是否有人可以向我指出我是如何将这个从“点击”功能更改为“加载”功能并延迟时间。所以我希望模式在页面加载约3秒后自动弹出。

此外，这个插件有一些不同的功能，但我只是将HTML条带化为我需要的东西。如果可能的话，请你脱掉让我知道我可以从剧本中删除的内容，这样我才能得到我需要的东西（因为这样会更容易学习）。

提前致谢。

;( function( $, window, document, undefined ) {

    'use strict';

    var pluginName = 'topmodal',
        defaults = {
            topmodal:             '.js-topmodal',
            topmodalBtn:          '.js-topmodal-btn',
            topmodalBtnClose:     '.js-topmodal-btn-close',
            topmodalContainer:    '.js-topmodal-container',
            topmodalOverlay:      '.js-topmodal-overlay'
        };

    function Plugin ( element, options ) {
        this.element = element;
        this.settings = $.extend( {}, defaults, options );
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }

    $.extend( Plugin.prototype, {
        init: function() {
            var _obj = this.settings;
            Plugin.prototype.handlerMethods( _obj );
        },

        handlerMethods: function( _obj ) {
            $( document ).on( 'click', _obj.topmodalBtn, function() {
                Plugin.prototype.show( _obj );
                Plugin.prototype.showContainer( _obj );
                Plugin.prototype.showOverlay( _obj );
            });

            $( document ).on( 'click', _obj.topmodalBtnClose, function() {
                Plugin.prototype.hide( _obj );
                Plugin.prototype.hideContainer( _obj );
                Plugin.prototype.hideOverlay( _obj );
            });

            $( document ).on( 'click', _obj.topmodalContainer, function() {
                Plugin.prototype.hide( _obj );
                Plugin.prototype.hideContainer( _obj );
                Plugin.prototype.hideOverlay( _obj );
            });

            $( document ).on( 'click', _obj.topmodal, function( event ) {
                event.stopPropagation();
            });
        },

        show: function( _obj ) {
            $( _obj.topmodal ).addClass( 'is-open' );
        },

        hide: function( _obj ) {
            $( _obj.topmodal ).removeClass( 'is-open' );
        },

        showContainer: function( _obj ) {
            $( _obj.topmodalContainer ).addClass( 'is-open' );
        },

        hideContainer: function( _obj ) {
            $( _obj.topmodalContainer ).removeClass( 'is-open' );
        },

        showOverlay: function( _obj ) {
            $( _obj.topmodalOverlay ).addClass( 'is-open' );
        },

        hideOverlay: function( _obj ) {
            $( _obj.topmodalOverlay ).removeClass( 'is-open' );
        }
    });

    $.fn[ pluginName ] = function( options ) {
        return this.each( function() {
            if ( !$.data( this, "plugin_" + pluginName ) ) {
                $.data( this, "plugin_" +
                    pluginName, new Plugin( this, options ) );
            }
        } );
    };

} )( jQuery, window, document );
.topmodal {
    background: #fff;
    box-sizing: border-box;
    display: none;
    position: relative;
    padding: 20px;
    max-width: 500px;
    width: 100%;
    vertical-align: middle;
    z-index: 10000;
}

.topmodal.is-open {
    display: inline-block;
}

.topmodal-overlay {
    background: rgba(0, 0, 0, 0.5);
    display: none;
    position: fixed;
    top: -100%;
    bottom: -100%;
    left: -100%;
    right: -100%;
    cursor: pointer;
}

.topmodal-overlay.is-open {
    display: block;
    z-index: 9999;
}

.topmodal-container {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
    display: none;
    text-align: center;
    overflow: auto;
    padding: 10px 10px 0;
}

.topmodal-container.is-open {
    display: block;
}

.topmodal-container:after {
    content: '';
    display: inline-block;
    margin-left: -.05em;
    height: 100%;
    vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TopModal - simple modal plugin</title>
    <link rel="stylesheet" href="topmodal.css">
</head>
<body>
        
        <button class="js-topmodal-btn">Popup</button>

        <div class="topmodal-container js-topmodal-container">
            <div class="topmodal js-topmodal" data-modal="a">
                <h1>Popup</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et eum ipsa nam quas repellendus sapiente!</p>
                <button class="js-topmodal-btn-close">Close</button>
            </div>
            <div class="topmodal topmodal--log js-topmodal--log" data-modal="l">
                <h1>Login</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum eos exercitationem iure non obcaecati reiciendis sapiente sit soluta velit voluptatem.</p>
                <button class="page__btn page__btn--cancel js-topmodal-btn-closesss">Close</button>
            </div>
            <div class="topmodal topmodal--reg js-topmodal--reg" data-modal="r">
                <h1>Registration</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias necessitatibus odio quia.</p>
            </div>
        </div>
        <div class="topmodal-overlay js-topmodal-overlay"></div>

    <!--scripts-->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="topmodal.js"></script>

    <script>
        $(document).ready(function () {
            $('.js-topmodal--log').topmodal({
                topmodal:         '.js-topmodal--log',
                topmodalBtn:      '.js-topmodal-btn--log',
                topmodalBtnClose: '.js-topmodal-btn-closesss'
            });

            $('.js-topmodal--reg').topmodal({
                topmodal:          '.js-topmodal--reg',
                topmodalBtn:       '.js-topmodal-btn--reg'
            });

            $('.js-topmodal').topmodal();
        });
    </script>

</body>
</html>

1 个答案:

答案 0 :(得分：1)

试试这段代码：

在handlerMethods中添加此代码：

setTimeout(function() {
   Plugin.prototype.show( _obj );
   Plugin.prototype.showContainer( _obj );
   Plugin.prototype.showOverlay( _obj );
 }, 3000); //set time here now 3 seconds

您在此处修改了代码：

＆＃13;
＆＃13; 
;( function( $, window, document, undefined ) {

    'use strict';

    var pluginName = 'topmodal',
        defaults = {
            topmodal:             '.js-topmodal',
            topmodalBtn:          '.js-topmodal-btn',
            topmodalBtnClose:     '.js-topmodal-btn-close',
            topmodalContainer:    '.js-topmodal-container',
            topmodalOverlay:      '.js-topmodal-overlay'
        };

    function Plugin ( element, options ) {
        this.element = element;
        this.settings = $.extend( {}, defaults, options );
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }

    $.extend( Plugin.prototype, {
        init: function() {
            var _obj = this.settings;
            Plugin.prototype.handlerMethods( _obj );
        },

        handlerMethods: function( _obj ) {
                setTimeout(function() {
                   Plugin.prototype.show( _obj );
                   Plugin.prototype.showContainer( _obj );
                   Plugin.prototype.showOverlay( _obj );
                 }, 3000); //set time here now 3 seconds
                
            $( document ).on( 'click', _obj.topmodalBtn, function() {
                Plugin.prototype.show( _obj );
                Plugin.prototype.showContainer( _obj );
                Plugin.prototype.showOverlay( _obj );
            });

            $( document ).on( 'click', _obj.topmodalBtnClose, function() {
                Plugin.prototype.hide( _obj );
                Plugin.prototype.hideContainer( _obj );
                Plugin.prototype.hideOverlay( _obj );
            });

            $( document ).on( 'click', _obj.topmodalContainer, function() {
                Plugin.prototype.hide( _obj );
                Plugin.prototype.hideContainer( _obj );
                Plugin.prototype.hideOverlay( _obj );
            });

            $( document ).on( 'click', _obj.topmodal, function( event ) {
                event.stopPropagation();
            });
        },

        show: function( _obj ) {
            $( _obj.topmodal ).addClass( 'is-open' );
        },

        hide: function( _obj ) {
            $( _obj.topmodal ).removeClass( 'is-open' );
        },

        showContainer: function( _obj ) {
            $( _obj.topmodalContainer ).addClass( 'is-open' );
        },

        hideContainer: function( _obj ) {
            $( _obj.topmodalContainer ).removeClass( 'is-open' );
        },

        showOverlay: function( _obj ) {
            $( _obj.topmodalOverlay ).addClass( 'is-open' );
        },

        hideOverlay: function( _obj ) {
            $( _obj.topmodalOverlay ).removeClass( 'is-open' );
        }
    });

    $.fn[ pluginName ] = function( options ) {
        return this.each( function() {
            if ( !$.data( this, "plugin_" + pluginName ) ) {
                $.data( this, "plugin_" +
                    pluginName, new Plugin( this, options ) );
            }
        } );
    };

} )( jQuery, window, document );
＆＃13; 
.topmodal {
    background: #fff;
    box-sizing: border-box;
    display: none;
    position: relative;
    padding: 20px;
    max-width: 500px;
    width: 100%;
    vertical-align: middle;
    z-index: 10000;
}

.topmodal.is-open {
    display: inline-block;
}

.topmodal-overlay {
    background: rgba(0, 0, 0, 0.5);
    display: none;
    position: fixed;
    top: -100%;
    bottom: -100%;
    left: -100%;
    right: -100%;
    cursor: pointer;
}

.topmodal-overlay.is-open {
    display: block;
    z-index: 9999;
}

.topmodal-container {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
    display: none;
    text-align: center;
    overflow: auto;
    padding: 10px 10px 0;
}

.topmodal-container.is-open {
    display: block;
}

.topmodal-container:after {
    content: '';
    display: inline-block;
    margin-left: -.05em;
    height: 100%;
    vertical-align: middle;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TopModal - simple modal plugin</title>
    <link rel="stylesheet" href="topmodal.css">
</head>
<body>
        
        <button class="js-topmodal-btn">Popup</button>

        <div class="topmodal-container js-topmodal-container">
            <div class="topmodal js-topmodal" data-modal="a">
                <h1>Popup</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et eum ipsa nam quas repellendus sapiente!</p>
                <button class="js-topmodal-btn-close">Close</button>
            </div>
            <div class="topmodal topmodal--log js-topmodal--log" data-modal="l">
                <h1>Login</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum eos exercitationem iure non obcaecati reiciendis sapiente sit soluta velit voluptatem.</p>
                <button class="page__btn page__btn--cancel js-topmodal-btn-closesss">Close</button>
            </div>
            <div class="topmodal topmodal--reg js-topmodal--reg" data-modal="r">
                <h1>Registration</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias necessitatibus odio quia.</p>
            </div>
        </div>
        <div class="topmodal-overlay js-topmodal-overlay"></div>

    <!--scripts-->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="topmodal.js"></script>

    <script>
        $(document).ready(function () {
            $('.js-topmodal--log').topmodal({
                topmodal:         '.js-topmodal--log',
                topmodalBtn:      '.js-topmodal-btn--log',
                topmodalBtnClose: '.js-topmodal-btn-closesss'
            });

            $('.js-topmodal--reg').topmodal({
                topmodal:          '.js-topmodal--reg',
                topmodalBtn:       '.js-topmodal-btn--reg'
            });

            $('.js-topmodal').topmodal();
        });
    </script>

</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题