Modal Box Problems, please help

I’m trying to add this to a website I’m working on. The tutorials here: http://designwoop.com/2012/07/tutorial-coding-a-jquery-popup-modal-contact-form/

But whenever I try I get these errors and the box just shows at the bottom and I don’t know why.

[Error] TypeError: undefined is not an object (evaluating '$.browser.msie')
	(anonymous function) (jquery.fancybox.js, line 93)
	global code (jquery.fancybox.js, line 1463)
[Error] TypeError: undefined is not a function (evaluating '$(".modalbox").fancybox()')
	(anonymous function) (index.php, line 939)
	c (jquery-1.10.2.min.js, line 4)
	fireWith (jquery-1.10.2.min.js, line 4)
	ready (jquery-1.10.2.min.js, line 4)
	q (jquery-1.10.2.min.js, line 4)

**jquery.fancybox.js line 93: iframe:** '<iframe class="fancybox-iframe" name="fancybox-frame{rnd}" frameborder="0" hspace="0"' + ($.browser.msie ? ' allowtransparency="true"' : '') + '></iframe>',

**jquery.fancybox.js line 1463:** }(window, document, jQuery));

**index.php line 939:** $(".modalbox").fancybox();

This is going to sound like a stupid question, but:

Are you loading the jQuery file or CDN before the jquery.fancybox.js file?

:slight_smile:

It wouldn’t be the first time I had done that, but this time I haven’t, this is the order everything is loaded:

/javascript/jquery-1.10.2.min.js
/fancybox/jquery.fancybox.js?v=2.0.6
/fancybox/jquery.fancybox.css

According to the first UPDATE of the first response to this SO post, either rollback to jquery 1.8, or get at least v2.1.4 of fancybox, which has been fixed to resolve a similar issue.

HTH,

:slight_smile:

I’ve updated it to fancy box version 2.1.5 but it still doesn’t work, although there’s now no errors to help :frowning:

EDIT: Okay I think I know what the problem is, it only works when you click the link. I want it to show on load, how do I do that?

You want a modal to appear the second the page is done loading?

I don’t know about you, but I am annoyed by sites that do that. I tend to avoid them.

However, if you must insist, place the code (or a reference to the function) within your $(document).ready(); and it should display upon page load.

:slight_smile:

I agree but that’s what my boss wants.

I tried adding it to the code but that didn’t work.

I’ve got this now:

$(document).ready(function() {
		$("#inline").fancybox();
		$(".modalbox").fancybox();
		$("#0-form").submit(function() { return false; });

One thing I will note about the CSS. You can’t start classes or IDs with a number first - it’s invalid.

Whether that’s causing issues, I don’t know. I just wanted to pop in and say that.

1 Like

I did remove the numbers, but that help. Thanks for letting me know about that though

That’s the same as the code that triggers by click?

:slight_smile:

I’m sorry to be so dumb but I don’t really understand, the code that loads it on click is

<a class="modalbox" href="#inline">click to open</a>

which I’m guessing then loads this:

$(document).ready(function() {
		$(".modalbox").fancybox();

I tried adding

$("#inine").fancybox();

but that didn’t work, the div I want to show has inline as it’s id

You have href=“#inline” not id=“inline”. Your HTML should be this?

<a class="modalbox" id="inline" href="#">click to open</a>

The anchor tag isn’t the code that loads on click. That’s the anchor that is clicked. You said that it originally was designed to be opened on click. Somewhere in your jQuery is code that triggers a function when class="modalbox" is clicked. Thta is the code that should be in your document ready statement.

HTH,

:slight_smile:

I’m sorry to be so dumb but I really don’t understand. I’ve search the jQuery file (as well as the fancybox file) for modalbox and there’s no mention of it there.

Sorry I don’t mean to ask so many questions but I’m extremely new to JS and am finding it difficult to learn.

Sorry… it won’t be in the jQuery file, itself, it will be in the code that you are working from to make your code.

I don’t think this is a very good tutorial. I’m also seeing comments from people having problems with this code.

I’ve never worked with fancybox, so can’t really say what is going on. But the document ready statement is applying fancybox() to the anchor tag, but I don’t see any trigger event.

:slight_smile:

Is it possible then to add a trigger event to the inline tag? I did try $(“#inline”).fancybox(); but that made no difference. Have I misunderstood how an event trigger works?

Yes. “inline” is the ID of the hidden div. When an anchor href attribute starts with a pound-sign, that’s a cue to the browser to scroll down to an element with that ID.

Since this is for a modal, I can only assume that the modal will open the whole page and scroll down to the hidden div and make the div visible??? I’m not sure. It’s not making a lot of sense, to me.

There are better tutorials, IMHO. Here is one that I’ve used. VERY straightforward, easy to code, nothing fancy or flashy.

:slight_smile:

1 Like

Thank you, that looks much more straightforward. I’ll give it a go.

Thanks for your help

I’ve decided to you your suggestion instead, but wondered if it was possible to use it with ajax? I want somebody to fill out a form, they then get a message thanking them then the box closes automatically.

One the other modal box I used this:

<script type="text/javascript">
function validateEmail(email) { 
	var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
	return reg.test(email);
}

$(document).ready(function() {
	$(".modalbox").fancybox();
	$("#form").submit(function() { return false; });

	
	$("#submit").on("click", function(){
		var emailval  = $("#email").val();
		var msgval    = $("#gender").val();
		var msglen    = msgval.length;
		var mailvalid = validateEmail(emailval);
		
		if(mailvalid == false) {
			$("#email").addClass("error");
		}
		else if(mailvalid == true){
			$("#email").removeClass("error");
		}
		
		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: 'sendmessage.php',
				data: $("#form").serialize(),
				success: function(data) {
					if(data == "true") {
						$("#form").fadeOut("fast", function(){
							$(this).before("<p><strong>Thank you for subscribing to the LA Muscle VIP Club mailing list.</strong></p>");
							setTimeout("$.fancybox.close()", 1000);
						});
					}
				}
			});
		}
	});
});

But don’t know how to adapt that to the new box? My boss want this by the end of today so I’m getting a bit stressed now :frowning:

It should be simply a matter of using event.preventDefault() to prevent the form from actually submitting, then follow that with $.post() to submit the information and conditionally (based upon what is returned) update an element in the DOM of the form page to display success or failure or just close the modal. $.post() has attributes for success, error, and another one that will process in both cases, I believe. (It’s been a while since I worked with $.post().)

HTH,

:slight_smile: