SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2005
    Location
    Huntington Beach, CA
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery simple modal close issues

    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

    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!
    Rob
    Pier Marketing ◄ Printing and Marketing Collateral - Order Online
    Pier Technologies ◄ Web Development & IT Solutions
    And That's News? ◄ My NEW Blog!!

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    Hi,

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

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2005
    Location
    Huntington Beach, CA
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the response. I had thought I put the URL....sorry about that. Here is the site http://shop.oliviawelles.com/
    Rob
    Pier Marketing ◄ Printing and Marketing Collateral - Order Online
    Pier Technologies ◄ Web Development & IT Solutions
    And That's News? ◄ My NEW Blog!!

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    Hi,

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

    I rewrote your modal code as this:

    Code JavaScript:
    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:

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

    Line 1236:

    Code HTML4Strict:
    <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:

    Code JavaScript:
    $.modal.close();

    Hope that helps.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •