Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #10045232
    middlemann
    Participant

    Hello,

    Is there any way to make a modal popup when a page is opened in the browser. I want to display a popup offer on the home page of a client’s website.


    #10045233
    middlemann
    Participant

    also be nice if it was responsive and had a delay on page load


    #10045234
    Support
    Keymaster

    Hello, this topic may help you:

    Pop Up

    Kind Regards.


    #10045262
    middlemann
    Participant

    this works great.

    any way to do the following:
    1. add a delay for displaying the popup
    2. add a fade in transition to the display of popup


    #10045264
    Support
    Keymaster

    Hello, the delay can be set in the JS, check the “delay” below:

    JS:

    $(window).on('load', function(){
        var delay = 5000; // Time in mili-seconds
    
        setTimeout(function(){
            $('#openModalLink').trigger('click');
        }, delay);
    });

    HTML:

    <button class="btn btn-modern btn-primary d-none" data-toggle="modal" id="openModalLink" data-target="#defaultModal">
    	Launch Default Modal
    </button>
    
    <div class="modal fade" id="defaultModal" tabindex="-1" role="dialog" aria-labelledby="defaultModalLabel" aria-hidden="true">
    	<div class="modal-dialog">
    		<div class="modal-content">
    			<div class="modal-header">
    				<h4 class="modal-title" id="defaultModalLabel">Default Modal Title</h4>
    				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    			</div>
    			<div class="modal-body">
    				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.</p>
    				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.</p>
    			</div>
    			<div class="modal-footer">
    				<button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
    			</div>
    		</div>
    	</div>
    </div>

    The fade class will make the default effect.

    More details: https://getbootstrap.com/docs/5.0/components/modal/


Viewing 5 posts - 1 through 5 (of 5 total)

This topic is marked as "RESOLVED" and can not rceive new replies.