I want to use modal window for a <form>. Can I do this with Ninja ShadowBox, in the documentation the closest thing I see is a normal <a> link but I need it for <form>.
29 Jul 09
Hi freespace,
What you need to do is create a separate page on your site with the form in it... then use shadowbox to link to that page.
See if you can find the details in the PDF thats attached to this article: http://nekkidninjas.com/index.php/2009/03/23/howto-ninja-shadowbox
29 Jul 09
How is the form generated?
If by a component then you could:
1. Get one of the several modules that display component content as a module
2. Put that module into the Ninja Shadow Panel module
3. It should now work!
If it's a hand written form, then:
1. Get one of the several post php modules, or if it's just html, then use a Joomla! custom HTML module (in the default joomla isntall)
2. Put that module into the Ninja Shadow Panel module
3. It should now work!
29 Jul 09
The form is custom and even more - there will be hundreds of similar but not the same forms. The action url for each form will be different. The forms are custom html + java script so no components there. It will be madness to make several hundred or even thousands of modules for each form and to invoke it. I really need to make the modal window to work for the <form> code.
I went through the documentation but didn't find anything similar. Any suggestions?
30 Jul 09
In that case, put each form on it's own html page, and then just point the shadowbox link to those pages. They will get opened up in an iframe inside the shadowbox popup.
30 Jul 09
If you take the option Dan mentioned above, you have two choices... either have the forms as standalone pages, or put them in Joomla pages. If you choose the latter, make sure you use domain.com/url-to-the-page?tmpl=component. This will give you clean forms without template styling.
See an example here of the effect on a Joomla.org page:
Without: http://www.joomla.org/about-joomla.html
With: http://www.joomla.org/about-joomla.html?tmpl=component
30 Jul 09
thanks mark. that was the command I was trying to remember!
30 Jul 09
Well isn't this ridiculous? To make several hundreds or even thousand of pages for the forms?
I sure do want to find a cleaner way :)
30 Jul 09
Well what would you expect to be a cleaner way?
If you can tell us how you think it should work perhaps we can think of a way to make it happen. But to display a page in a popup takes that sort of work. To display a thousand will take that work x 1000
Why do you need a thousand forms anyway?
30 Jul 09
Well I would like to have the option for this to work with <form> :).
I want to begin as an affiliate for a web program. Every item will have separate form for availability/buy check. The forms will lead to a third party site (the affiliate program) and I want my users to see this 3rd party site inside modal window (it looks more native and will gain trust). I want the form to be on the product page and not on a separate one. It's going to be a lot of work and not so clean a way.
I hope that this way it's clear. Please do tell me if it's not I will try to explain more thoroughly and with screen-shots.
30 Jul 09
Post a link to the page that has the form on it, and we will try and find a way to put in the link to the modal window (with external site in it)
30 Jul 09
I can't see how it would work with <form> because the form points to nothing. A link points to something and shadowbox then loads that something up.
Working with <form> you mean to popup the form, in which case you need a link pointing to the form, which is exactly what I said above.
I think screen shots would be better. I am still not quite following how this is supposed to look and work.
30 Jul 09
OK, here goes a link and a screen shot :)
The original page in Bulgarian
And there's the screenshot as attachment. So I want when the user clicks on the orange button (translated in English as Book Now) to open the modal window. 
30 Jul 09
The orange button = a link
Which is exactly what we were talking about above.
Now that I think about it though. You may be able to get away with it by wrapping the form in the exact HTML and CSS that we use on shadow panel. That should hide the form and view and enable it to be popped up by the link.
Leave it with me for 24 hours and I will try to come up with something. (I need to go to work right now)
01 Aug 09
OK Freespace,
Here is what you will have to do.
Wrap all the forms in the following HTML:
<a href="#shadow{AAA}" title="{BBB}" class="option" rel="shadowbox;width={CCC};height={CCC};options={enableKeys:false}"><span id="spspan">{DDD}</span></a>
<div class="sphidden" id="shadow{AAA}">
<div class="spinner" id="spbody-{AAA}">
<!-- form HTML goes here -->
</div>
</div>
Where:
[ul]
[li]{AAA} = a unique id number for each form (MUST use same number 3x )[/li]
[li]{BBB} = A title that people will see when they hover over the link[/li]
[li]{CCC} = the height and width of the popup[/li]
[li]{DDD} = The text to show for your link e.g. Pe3epB...etc [/li]
[/ul]
Then you will need to take the CSS from shadow panel and put it into your site template
.sphidden {
display: none;
}
.spinner {
padding: 0px;
overflow: hidden;
}
#spspan {
background: url('../images/shadowpanel.jpg') repeat-x;
height: 38px;
width: 200px;
}
a #spspan {
line-height: 34px;
/*border: 2px solid #85A4C1;*/
display:block;
font-weight: bold;
text-align: center;
background-position: 0 0;
color: #333333;
}
a:hover #spspan {
color: #fff;
background-position: 100% 100%;
}
Then of course, add shadowbox to the page.
02 Aug 09
wow, thank you. I tried what you suggested but it isn't working correctly right now.
I added the CSS style the the template.css and wrapped the form code where you stated. For the test I entered a random number for {AAA} (in the real world do I have to use some function to generate this? my forms will be each on a separate page so I was thinking if I can enter the same static number everywhere?).
So far so good but the link didn't open at all until I removed
options=enableKeys:falsefrom the <a href> option. After that the link opened the form in shadow box but when I hit the "book now" button it opened in a new window. I tried to modify the form target from _blank to _self or to delete it but then it opened in the "parent" window (the main site) and not in the shadow box.
02 Aug 09
after some thought I think that opening the form from a text-link is not good. The whole beauty of the form is that it is visible while looking at the description page and could lead to a click and sale. There's no point to open just the form alone from a text and then to redirect to the third party site.
Isn't it possible to modify the code:
<form id="frm" name="frm" action="http://www.the-url.com" method="get" target="_blank">
or
<input class="button" value="button-text" type="submit">
I tried the following:
<input class="button" value="button-text" type="submit">
to
<input class="button" value="button-text" type="submit" onclick="Shadowbox.open({title:'Reservation', content:'http://www.the-url.com'}); return false">
or
<form id="frm" name="frm" action="http://www.the-url.com" method="get" target="_blank">
to
<form id="frm" name="frm" action="the-url" method="get" target="_blank" onclick="Shadowbox.open({title:'Reservation', content:'http://www.the-url.com'}); return false">
but without much of a success.
I also find this link but as I understand almost nothing of a code I didn't get it:
http://www.shadowbox-js.com/forum.html#nabble-td1311060
From what I got I will need a new PHP page made by a programmer which will intercept the request and then it will open the shadowbox as a <a href> link with all of the required parameters.
Am I right?
02 Aug 09
Or is it possible to change the action of the form and instead of opening the 3rd party site to open a php page/code that will receive the same parameters from the form, extract these parameters, put them in <a href> link and then "activate" this link. This way the <a href> could have the rel="shadowbox" and I can add one more parameter to the form - the 3rd party page to be send to the php page/code.
Maybe it sounds fantastic but I'm thinking aloud :)
02 Aug 09
You have lost me.
When people fill out the form, you want to send the form to a new site and then open this new site in the shadowbox as well?
If you want to do that then you will have to use what I originally suggested and load a new page in an iframe. Just pulling some HTML off the page as we are doing now and then submitting it will refresh the entire page, including everything underneath the shadowbox.
Or are you trying to submit directly to the new site?
Or submit to the new site and open the result in a shadowbox?
03 Aug 09
Sorry for the confusing explanation :)
I want the whole process to be:
1. User clicks on the "book now" button on the page with the description of the hotel (the image on the left of the attached file)
2. The user is presented with the shadowbox with URL loaded from the form (with it's attributes) (image on the right).
I was thinking if this is possible using some php code on the same page or some other way.
Link to the attached image: http://img29.yfrog.com/i/behavior.jpg/
03 Aug 09
So the user selects some options on your site, then clicks the "book now" option, and a shadowbox opens up the destination site, with their booking information that they entered on your site copied over?
Or you submit the form directly to the site and the results show up in the shadowbox?
I am afraid that will take quite a lot of coding, and may not even be possible depending on how the receiving site is setup.
03 Aug 09
Daniel wrote:
So the user selects some options on your site, then clicks the "book now" option, and a shadowbox opens up the destination site, with their booking information that they entered on your site copied over?
mmmm no
Or you submit the form directly to the site and the results show up in the shadowbox?
Yes, that's correct
I am afraid that will take quite a lot of coding, and may not even be possible depending on how the receiving site is setup.
I only know that the receiving site is getting its parameters from the URL. There's nothing more. And this parameters are send by the form. The final URL is like: (1)action_URL_of_the_form + (2)form_user_selected_options. And from this the 3rd party site gets:
(1) - the URL of the particular hotel + my affiliate ID
(2) - the booking options chosen by the user on my site
So I have an URL that I need to open in the shadowbox BUT this URL is generated based on the user chosen options.
Please confirm if this explanation is clear and if it needs coding I will try to find a proposal from a programmer for this and will stop bugging you :).
Thank you again for even looking into this and helping me.
03 Aug 09
hmm. if it can be passed through the url, and doesn't need to be a post, then it might be possible.
You would still need some javascript to alter the url as the user selects their options.
03 Aug 09
The method type of the form is GET, it is not POST. I can paste the form code if it would help.
03 Aug 09
are you sure it can be called just with a url and not only from the form being submitted?
03 Aug 09
Yes, I'm positive on that. Just tried to copy the URL and change some of the options in it and after opening the page it represented the changes I made.
03 Aug 09
Then I guess the final answer is that yes it can be done!
But you will need some Javascript to change the target url whenever the user changes their choices on the form.
03 Aug 09
Thank you. If I find someone to do it, I'll get back to post the solution so maybe the community will benefit from it.
03 Aug 09
A friend of mine is on the way to make the java script. After it is done I will post it here.
I have another problem now. Please tell me if I need to start another thread for it.
I have a bunch of modules/plugins/components and some are using jquery and other libraries. So when I installed the shadow box some of them stopped working. The only way to make them work again is to set the shadowbox options to
Javascript Library: YUI
Include core JS Library: include
Include JS: include
however by this options the shadowbox is not working :( Is this normal?
03 Aug 09
Yui is probably a bad one to choose unless the rest of your site is using Yui.
It is not a good idea to mix libraries, as there will come a point where web browsers JavaScript engines simply can't take any more and something dies.
Your best bet is to go with JQuery, and make sure that you aren't loading Jquery twice on the same page.
Literally 99% of Javascript problems I see are because of a library conflict. Either two conflicting libraries loaded, or the same library loaded twice.
View the source of your page (right click on it and select view source) and search for "script" (without the " ) that will show you all your scripts. If you see the same library loaded twice you will need to disable one of them.
Unfortunately you *may* have to choose between extensions at one point if you are loading too many.
04 Aug 09
OK, however isnt' it supposed to be working with the YUI library after all?
I tried the other options but they conflict with my multithumb plugin which uses greybox library.
05 Aug 09
Yes it works with Yui, but unless the rest of yours site is also using yui, you are loading an extra library and risking problems as well as increasing your page load times.
Perhaps you could modify the multithumb gallery so that it uses shadowbox instead of greybox.
Or the other way around and just use greybox. Trying to fit too many different types of JS onto a page will almsot always give you errors.
Forum Joomla Extension Support Ninja Shadowbox for ?