Change on click modal to on load with time delay

Question

I have this simple modal plugin that I downloaded (and striped back) as I'm trying to learn the functionality.

I was wondering if someone could point out to me please how I go about changing this from an 'on click' function to a 'on load' function with a time delay. So I'm wanting the modal to automatically popup after about 3 seconds of the page loading.

Also, this plugin had a few different features but Ive striped back the HTML to only what I need. If at all possible, could you please strip out of let me know what I can strip out of the script so I only have what I need (as it will be easier to learn it that way).

Thanks in advance.

;( 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>

Answer 1

Try this code:

Add this code in handlerMethods:

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

You modified code here:

;( 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 );

.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>