interactive popup window type thing?

[ShootingBlanks]

Hello.  I'm wondering how to make it so that when a user clicks a link, that link will open a kind of "on-screen popup window" (I say "on-screen" because I want it to sort of overlay the current window contents - and even ideally sort of "fade out" the original page's contents in the background like you may have seen on some sites, but that's not a necessity).  The window would have an input box with a "SUBMIT" button that would feed the input text to a database.  There would also be a "CANCEL" button to close the popup window.  Because the input text would feed to a database, and the database table that it feeds to would be dependent on the link that was clicked to open the popup window, I would need the on-screen link that initiates the popup window to pass a variable to it.

 

I'm thinking jQuery can accomplish this somehow, but I'm way too novice to get this going on my own, so I'm looking for some startup help.  I wouldn't need any help with the database insert code.  Just with getting the popup window open and pulling in a variable from a clicked link.

 

Thanks so much for any help that can be offered to get me going on this!!!

[F1Fan]

Here's what you're looking for:

http://jqueryui.com/demos/dialog/#modal

[ShootingBlanks]

Thanks!  I think that's what I'm looking for.  Well, particularly this: http://jqueryui.com/demos/dialog/#modal-form.

 

But the documentation for doing that is pretty bad.  It shows that example, but doesn't really explain it or even show how to associate it with a link/button.  I copied/pasted the example code onto a page, and all the HTML of the popup form just showed on the page (flat - not popped up or anything).

 

[F1Fan]

As for it being flat, it sounds like you aren't pointing to the proper jQuery file.

 

About the documentation, it is very good for showing you how to make the modal dialog. What are you having trouble with? How to handle the form? Ajax?

[ShootingBlanks]

What are you having trouble with? How to handle the form? Ajax?

 

Much of this may just be my limited novice knowledge of jQuery.  Basically, from what I can tell they use this as an example:

$(document).ready(function() {
var $dialog = $('<div></div>')
	.html('This dialog will show every time!')
	.dialog({
		autoOpen: false,
		title: 'Basic Dialog'
	});

$('#opener').click(function() {
	$dialog.dialog('open');
});
});

 

That gives a popup that has a div that says "This dialog will show everytime!".  I don't want a div, though.  I want a whole other page to show up (the page with the form).  Or, is that stupid?  Should I just have the form on the same page in a div?

 

Anyway, using the code above I can get the dialog box to pop up, but I can't integrate that "modal" code to have the fading in the background.

 

Thanks!

[F1Fan]

Put that form in a div, hide the div using style="display:none;" and give it an ID, let's say dialogForm. Then just do this:

$(document).ready(function() {
   $('#opener').click(function() {
      $('#dialogForm').dialog('open');
   });
});

 

Also, it sounds like you are still missing some jQuery files. Are you getting any JS errors?

[ShootingBlanks]

Got it!  I found something called "thickbox" that seemed to work.  Thanks for the help!  Now to figure out how to get this thing submitted properly!