0

I want to create an auto pop up contact form. When a user visit my website...automatically display pop up form.

I am trying some code but it gives pop up form after the button is clicked(It's working good). Now I am trying to create auto pop up with out need of any button...

my html file is here

<html>
 <head>
 <title>Popup contact form</title>
<link href="elements.css" rel="stylesheet">
<script src="my_js.js"></script>
</head>
<!-- Body Starts Here -->
<body id="body" style="overflow:hidden;">
<div id="abc">
<!-- Popup Div Starts Here -->
<div id="popupContact">
<!-- Contact Us Form -->
<form action="#" id="form" method="post" name="form">
<img id="close" src="images/3.png" onclick ="div_hide()">
<h2>Contact Us</h2>
   <hr>
<input id="name" name="name" placeholder="Name" type="text">
<input id="email" name="email" placeholder="Email" type="text">
<textarea id="msg" name="message" placeholder="Message"></textarea>
<a href="javascript:%20check_empty()" id="submit">Send</a>
</form>
</div>
<!-- Popup Div Ends Here -->
</div>
<!-- Display Popup Button -->
<h1>Click Button To Popup Form Using Javascript</h1>
<button id="popup" onclick="div_show()">Popup</button>
</body>
<!-- Body Ends Here -->
</html>

my java script file is looking like this

// Validating Empty Field
function check_empty() {
if (document.getElementById('name').value == "" ||        document.getElementById('email').value == "" ||     document.getElementById('msg').value == "") {
alert("Fill All Fields !");
} else {
document.getElementById('form').submit();
alert("Form Submitted Successfully...");
}
}
//Function To Display Popup
function div_show() {
document.getElementById('abc').style.display = "block";
}
//Function to Hide Popup
function div_hide(){
document.getElementById('abc').style.display = "none";
}

and I have some css code. Here I am not mention.

How to create auto pop up form with out need of any button?

HaveNoDisplayName
  • 7,711
  • 106
  • 32
  • 44
divis
  • 11
  • 2

1 Answers1

1

you need to call your "popup method" after the Page (DOM) is loaded:

http://www.w3schools.com/jsref/dom_obj_document.asp

jQuery:

$(document).ready(function(){
  div_show();
}

native JS:

document.addEventListener("DOMContentLoaded", function(event) { 
  div_show();
});

further links that may interest you:

$(document).ready equivalent without jQuery

http://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp

https://jqueryui.com/dialog/

greetings

Community
  • 1
  • 1
messerbill
  • 4,582
  • 1
  • 19
  • 33
  • working good when this code is added to js file //function to call div_show() function after 10 secs of page load setTimeout(function() { div_show(); }, 10000); – divis Dec 03 '15 at 02:40
  • so upvote the answer and mark it as solved if it helped you please – messerbill Dec 03 '15 at 02:41