jQuery simple modal close issues

JavaScript
1

I am using jQuery simple modal to bring up an email subscription dialog when someone first visits a site. The modal window pops up just fine and I have it so that when someone clicks “no thanks” the window closes.

What I am having trouble with is

  1. When someone clicks outside of the modal window it does not close.
  2. Once the form is submitted I would like to have the window close as well.

Here is my code


jQuery(function($) {
      if ($.cookie("newsletter") != 1) {
        $('#basicModalContent').modal({
          onClose: function() {
            $.cookie("newsletter", "1", { expires: 7 });
            $.modal.close({
            	overlayClose:true
			
			});
		  $('form').submit(function(e) {
			e.preventDefault();
			$.cookie('newsletter', '1', { path: '/', expires: 999999 });
		  });
          }
		});
	  }
    });

Any help is appreciated!

2

Hi,

Can you post a link to a page where I can see this in action?

3

Thank you for the response. I had thought I put the URL…sorry about that. Here is the site http://shop.oliviawelles.com/

4

Hi,

So, to make the modal close when someone clicks on the overlay, use the option overlayClose
See: http://www.ericmmartin.com/projects/simplemodal/#options

I rewrote your modal code as this:

if ($.cookie("newsletter") != 1) {
  $.cookie("newsletter", "1", { expires: 7 });
  $('#basicModalContent').modal({
    overlayClose: true
  });
}

Regarding the modal not closing when the form submits, there is an additional problem that needs to be solved before we can do this:

You have two forms on your page with the same id.
Ids must be unique to a page.

Line 168:

<form action="http://shop.oliviawelles.com/newsletter/subscriber/new/" method="post" id="newsletter-validate-detail">

Line 1236:

<form action="http://shop.oliviawelles.com/newsletter/subscriber/new/" method="post" id="newsletter-validate-detail">

Is there any reason why you need the same form twice?

From a JavaScript perspective you will need to hook into the form’s submit event handler and programmatically close the modal with:

$.modal.close();

Hope that helps.