Following is my fiddle in which i made a div with class overlay and i am trying to do that when user clicks on submit button then that overlay class div appears on the div of contact form and on clicking close button that div hides and it shows the reset form again. Kindly let me know how can I make such kind of overlay on the contact form on submit button

/

.overlay
{
    background-color: yellow;
    height:200px;
    width: 300px;

}

Following is my fiddle in which i made a div with class overlay and i am trying to do that when user clicks on submit button then that overlay class div appears on the div of contact form and on clicking close button that div hides and it shows the reset form again. Kindly let me know how can I make such kind of overlay on the contact form on submit button

http://jsfiddle/VqDKS/

.overlay
{
    background-color: yellow;
    height:200px;
    width: 300px;

}

• javascript
• jquery
• css

5 Answers 5

See this, edited with jQuery and CSS. Set the overlay to position: absolute and hide it before the form is submitted. Then remove it when the 'Close'-button is clicked.

http://jsfiddle/VqDKS/3/

CSS:

.overlay
{
    background-color: yellow;
    height:200px;
    width: 300px;
    position: absolute;
    top: 0px;
    z-index: 99;
    display: none;    
}  

Jquery code:

 function js()
{
    alert('clicked submit: get typed name');
     var name = $("#FN3").val();
    $("#name").html( name );
    $(".overlay").fadeIn()
    return false;
}
$(document).ready(function(){
    $(".close").click(function(){
        $(".overlay").fadeOut();
        $('#contact_form3 input[type="text"]').val('');
    });
});  

Make following change in HTML:

<input type="button" value="close" class="close">

You need to hide your overlay at the beginning just show the form. When clicked submit, show overlay and hide the form. Then when close is clicked hide the overlay and show the form. It can be as :

function js()
{   alert('clicked submit: get typed name');
   var name = $("#FN3").val();
   $("#name").html( name );
   $("#form-div").hide();    
   $(".overlay").show();
   return false;
}
function closeOverlay(){
   $("div.overlay").hide();
   $("div#form-div").show();  

}

please have a look here : http://jsfiddle/injulkarnilesh/VqDKS/7/

Basically you need to set the contact form wrapper position property to relative and then just set position of your overlay to absolute, something like this:

.contact_wrapper { position: relative; }
.overlay { position: absolute; top: 0; left: 0; }

This way you will be sure that your overlay will be absolute positioned on the top of your contact form.

When page is loaded, we don't need the overlay, so you can add the following property:

.overlay { display: none; }

In your code, when you submit the form you are using onclick event to execute your handler.

Here you need to make overlay visible again, you can use .show() of jQuery:

$('.overlay').show();

And now you need to add event handler to deal with close button, you can simply add unique idintifier (e.g. class) to the element, then with jQuery you can trigger click event for this element and here you can hide your overlay.

$('.closeBtn').click( function() { 
    $('.overlay').hide();
});

By the way, you can read about .submit() and .ajax() methods in jQuery.

Here is a working jsFiddle.

I updated your fiddle a bit: http://jsfiddle/nweevers/VqDKS/8/

This is a way to do this. But then your form isn't still submitted. The best way is to show the overlay after the post. And then you can hide the overlay with the button.

$overlay.on('click', 'input[type=button]', function() {
    $overlay.hide();
});