Jquery Popup Form Centered Window

Popup forms or dialog menu can be centered using Jquery and CSS. This comes in handy for the contact form, data form insertion, landing page and other type of the situations. In this tutorial we are going to use CSS for centering the form and jquery for the event handling. If you are interested in creating a form popup that needs to be placed at the center of browser screen, then keep reading this tutorial.

Jquery Popup Center
Jquery Popup Center

We are going to follow modular approach in this tutorial and then at the end I'll present the full source code. Here are the steps that we are going to follow in this tutorial.

  • Create a DIV class and add form or specific content inside it.
  • Hide the DIV using inline CSS.
  • Write the Jquery code to hide and show the DIV.
  • Write the CSS to center the DIV class.
  • Use CSS to style the button or link that triggers this popup.


You can choose any step as you wish and complete it. For this tutorial, we are going to create the form and add inside div="d_form". You can call it whatever you want, but If you are following this tutorial then use the current naming.

<div id="d_form style:"display:none">

<label>First Name :</label><input type="text" name="name">
<br/>
<label>Surname :</label><input type="text" name="surname">
<br/>
<input type="submit" name="login">
<br/>

<a href="#" id="close">Close</a>
</div>

You can test the form on html page to see if the inline css works correctly by hiding this form. We have also included the close link. So that when clicked on it, will hide the form.

Now let's write the jquery code to hide and show the DIV.

$(document).ready(function() {

$("#pop"). click(function(){
$("#d_form").show();
});

$("#close").click(function(){
$("#d_form").hide();
});

});

Alternatively, you can use fadeIn() and fadeOut() functions as well. It depends on how you want form to appear and disappear.

We are now going to style the div and center the form.

#d_form{
top:35%;
left:35%;
margin:-50px 0 0 -100px;
width: 500px;
height:200px;
border: 12px #ddd solid;
position:absolute;
padding:10px;
}

#pop{
display:block;	
color:#da4747;
width:100px;
height:100px;
border-radius: 2px;
}

Now that we are done with the pop button and the form CSS. We can go ahead and add the pop button link reference.

<center><a href="#" id="pop"> PopUp</a></center>

Conclusion

That's it, we have pretty much completed our pieces and now it's time to connect them. See the full source of the page.


How it Works?

When you click on popup button, jquery listens to the click and triggers the show function and you see the form. This form is invisible by default because of default css property. And when clicking on close link in the form, that is going to call the hide() function and form will disappear.

You can make more enhancement by using the fadeIn and fadeOut function because hide and show methods are going to be very quick. Fade and toggle adds animated effect for the readers to see.

Where to use it?

You can use it for email sign ups, terms and conditions page, offers page, coupon codes, captcha and many other situations where you want reader to take action immediately.

Comments 1 comment

chefmancave profile image

chefmancave 3 years ago from Michigan

Believe it or not, I found this very helpful.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working