You will recieve your password to this address. Address is not made public.

Your preferred username that is used when logging in.

Closing a Modal overlay Created Nov 4, 2009

This thread is solved

Views: 313     Replies: 1     Last reply Nov 5, 2009  
You must login first before you can use this feature

djclothier

Posts: 3

Registered:
Nov 4, 2009

Closing a Modal overlay

Posted: Nov 4, 2009

Hi there,

This may be a quick and easy one to solve - I'm new to javascript coding, but I've managed to get a modal overlay working as a 'contact me' overlay. Once the form posts back to the server with success, it then tells the user (still within the overlay) that the email was sent etc. All well and good so far.

The only problem I have is that when I place a Close button on the confirmation notice (ESC key is disabled on the modal/overlay) I cn't get it to close the modal at all. I have assigned it the 'close' class From reading other posts it would seem that because the contact form itself is AJAX, the scripts will already have run by the time the Cancel button has loaded and therefore the class="close" will not execute in the confirmation page as I had hoped it would.

Is there a simple way to bind a 'close' to the button in the following code to get the modal/overlay to close please?


if(hasError == false) {
			$(this).hide();
			$("#sendEmail li.buttons").append('<img src="images/loading.gif" alt="Loading" id="loading" />');
			
			$.post("emailer.asp",
   				{ Name: Name, Email_address: Email_address, Subject: subjectVal, Message: messageVal },
   					function(data){
						$("#contact").slideUp("normal", function() {				   
							
							$("#contact").before('<h1>Success</h1><p>Your email was sent.</p><p></p><p><button type="button" class="close"> Cancel </button></p>');											
						});
   					}
				 );
		}
		
		return false;
	});						   
});
</script>

Been searching around on the Net and everything points to closing the window (which I don't want) as opposed to only the modal/overlay?

Thanks in advance,
David

djclothier

Posts: 3

Registered:
Nov 4, 2009

OK, so I cheated....

Posted: Nov 5, 2009

Reply to: Closing a Modal overlay, from djclothier
I was chatting to a friend of mine about this and he suggested a really easy way out of it...

Instead of trying to bind properties/actions to html generated by AJAX after the page load, why not insert the HTML on page load, but set the DIV that contains it to display:none (I did this in CSS to keep the styling away from the page). Then we changed the last bit of code above to this:

function(data){
   $("#contact").slideUp("normal", function() {                                                           
       $("#divEmailSent ").show();              
   });

So it loads on page load, but doesn't show it on the page - it's unhidden when called later on on email confirmation section.

Works well on a page this size as it's small enough to render without any page flickering... not exactly the solution I was looking for but the net effect on visuals is the same.

Thanks,
David