CODEWITHSUNDEEP
jquerymodal-dialogpopupmenu
Jack H
Jack H

Reputation: 344

How to make my modal form popup on page load with a delayed timer

I am building a website and need a form that pops up when the user lands on the page with a delayed timer on...

I can not get the form to pop up though. What am i doing wrong?

Timer

setTimeout(popup, 10000); // Setting time 3s to popup login form
function popup() {
    $("#openModal").css("display", "block");
}

PopUp Form

<div id="openModal">
    <a href="#x" class="overlay" ></a>
    <div class="popup">
        <h2>Just Stopping By</h2>
        <p>Please enter your details here</p>
        <div>
            <label for="firstname">First Name:</label>
            <input type="text" id="firstname" value="" placeholder="First Name*" />
        </div>
        <div>
            <label for="lastname">Last Name:</label>
            <input type="text" id="lastname" value="" placeholder="Last Name*" />
        </div>
        <div>
            <label for="email">Email:</label>
            <input type="text" id="email" value="" placeholder="Email Address*" />
        </div>
        <div>
            <label for="phone">Phone:</label>
            <input type="text" id="phone" value="" placeholder="Phone Number*" />
        </div>
        <center><input class="button-primary" type="button" value="Submit!" /></center>
        <a class="close" href="#close"></a>
    </div>
</div>

Upvotes: 0

Views: 2032

Answers (1)

Milind Anantwar
Milind Anantwar

Reputation: 82241

You should rather use setTimeout when dom is ready :

$(function(){//document ready event
   setTimeout(function(){
        $("#openModal").show();
   },3000);//set interval to 3 second
});

Upvotes: 2

Related Questions