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,890
    Mentioned
    210 Post(s)
    Tagged
    12 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,890
    Mentioned
    210 Post(s)
    Tagged
    12 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
  •