Modal Box Problems, please help

I’m sorry I don’t understand, do I need to modify the script I was using before or do I need to write something new?

I’m probably getting to stressed to take it in at the moment but really appreciate your help.

I would start from scratch, if time allows. The tutorial you originally used is a little confusing, to me.

Basically, if I need to do what you are doing, I will create a separate page for the form, use jQuery to open a simple jQuery modal containing that form page, submit the form using AJaX (ie, $.post() with all necessary arguments), and process the response.

Unfortunately, I can’t write samples for you, or provide you with code. Google “$.post()” and use the jquery.com documentation to see how to use preventDefault() so the form doesn’t actually submit (which would reload the page… very bad, if you want something seamless).

If I can find one that I’ve already done, I can put it on Slexy, for you.

:slight_smile:

UPDATE: I just looked… I do have an example, but it’s in ColdFusion. If you’re not familiar with ColdFusion, my example might only confuse you.

I’ll give it a shot from here… if I can do it without confusing you. (I just realized that I may have provided an incorrect link to the modal code that I’m using.)

I have a page, index.html. In it is a span that I give an ID of “regLink”.

<span id="regLink">Register</span>

I have the following code to create an object called “modal”:

var modal = (function(){
    var method = {}, $overLay, $modal, $content, $closer;
    $overLay = $('<div id="overLay"></div>');
    $modal = $('<div id="modal"></div');
    $content = $('<div id="content"></div');
    $closer = $('<a href="javascript:void(0);" id="closer"></a>');
    $centerer = $('<a href="javascript:void(0);" id="centerer"></a>').css({display:'none'});
    $modal.hide(); $overLay.hide(); $modal.append($content,[$closer,$centerer]);
    method.center = function(){
        var top, left;
        top = Math.max($(window).height() - $modal.outerHeight(),0) / 2;
        left = Math.max($(window).width() - $modal.outerWidth(),0) / 2;
        $modal.css({top:top + $(window).scrollTop(),left:left + $(window).scrollLeft(),zIndex:10000000});
        $overLay.css({zIndex:9999999});
        };
    method.open = function(settings){
        $content.empty().append(settings.content);
        $modal.css({width:settings.width || 'auto',height:settings.height || 'auto'});
        method.center();
        $(window).bind('resize.modal',method.center);
        $modal.show();
        $overLay.show();
        };
    method.close = function(){
        $modal.hide(); $overLay.hide(); $content.empty(); $(window).unbind('resize.modal');
        };
    $closer.click(function(e){
        e.preventDefault();
        method.close();
        });
    $centerer.click(function(e){
        e.preventDefault();
        method.center();
        }); 
    $framst.append($overLay,$modal);
    return method;
    }());

I then provide the jQuery code to the bottom of index.html to give the span an onclick event and make it mimic what happens when you click an anchor.
GET is used, and it gives the external form file the closing X. (data)

$(document).on('click', '#regLink',function(){
   $.get('testform.cfm',function(data){
      modal.open({content:data})});
   }
});

Now, “testform.cfm” is the external file that contains my form. It contains the $.post() that will preventDefault() the form submit and submit the form via AJaX.

HTH,

:slight_smile:

Thank you so much I used what you should me to help me get mine working. It’s working now, but I do have one last question though, sorry.

How do I set cookies so that after it’s launched (regardless of whether the user responds to the box or not) it won’t display again for 30 days?

I added this to the top of the js file but that stopped it working altogether. I also tried adding it to the bottom but then the cookies weren’t set.

//if the cookie hasLaunch is not set, then show the modal window
if (!readCookie('newsletterCookie')) {
    //launch it
    launchWindow('#dialog');        
    //then set the cookie, so next time the modal won't be displaying again.
    createCookie('newsletterCookie', 1, 30);
}

Sorry I hadn’t seen the link to setting cookies d’oh!!

It’s all working perfectly now thank you :smile:

1 Like

I’m really sorry I have one last question, I promise:

How do I change this so that it doesn’t wait for any data to be returned before closing:

$.ajax({
					type: 'POST',
					url: 'sendmessage.php',
					data: $("#form").serialize(),
					success: function(data) {
						if(data == "true") {
							$("#form").fadeOut("fast", function(){
								$(this).before("<div class='thanks'><strong>Thank you for subscribing</strong></div>");
		$('#mask').hide();
		$('.window').hide(1000);
							});
						}
					}
				});

The success attribute is what happens after a successful submit. If you take out everything between (NOT including) function(data) and the second-to-last curly bracket } and replace it with the code to close the modal, that should do it.

HTH,

:slight_smile:

Sorry to be a pain but I changed it to this but it still just said sending… and didn’t get any further than that.

if(mailvalid == true) {
				// if both validate we attempt to send the e-mail
				// first we hide the submit btn so the user doesnt click twice
				$("#submit").replaceWith("<em>sending...</em>");
				
				$.ajax({
					type: 'POST',
					url: 'http://dmtrk.com/signup.ashx',
					data: $("#form").serialize(),
					success: function(data) {
		$('#mask').hide();
		$('.window').hide(1000);
					}
				});
			}

I haven’t read the entire thread yet, but just by looking at that last post: you set #submit to “sending…” just before you actually send the data, but you don’t do anything with #submit after the data has been set.

Try adding $('#submit').hide() after $('#mask').hide()

I changed it to this but it still just says sending…

success: function(data) {
		$('#mask').hide();
		$('#submit').hide(1000)
		$('.window').hide(1000);
					}

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.