I'm using Joomla 1.5.22 with Mootools 1.1. I've got a module having a form found in a concealed div that I wish to open in Joomla's built-in modal box. The issue I've is the fact that after i follow the link the shape opens within the modal box, it opens the div within the module around the page.

HTML:

<div id="moduleBox">
    <div id="clickMeButton"><a id="formClick" class="modal" href="#hiddenForm">Click me</a></div>
    <div id="hiddenForm">
     form code goes here
    </div>
</div>

Javascript:

window.addEvent('domready', function() {
  $('formClick').addEvent('click', function(){
    $('hiddenForm').setStyle('display','block');
  });
});

So how do you obtain the form to simply display in the modal box?

You can observe things i am speaking about here - http://www.internextion.com/

It is the Call Back Module. I already added the handler: 'adopt' as recommended below, now it makes sense quite different. The prospective div still turns up underneath the link, however the modal window consists of the hyperlink as opposed to the target.

I believe this uses Harald's SqueezeBox - by which situation, you're searching in the following situations:

  • discover the target div and CLONE it to place in to the modal box.
  • discover the target div and ADOPT it in to the modal box.

you're seeing the very first (default) situation. to offer the second effect, add:

handler: 'adopt'

towards the instantiation options. more here: http://digitarald.de/project/squeezebox/1-1/showcase/get-elements/

Option 1:

Should you consider the web coding (in firebug) for that overlay div you will find that it can make a "copy" of html and places within the overlay container with id="sbox-content". Theoretically should you give a CSS like below +/-, it'll hide the hyperlink and display anything else. This can be the easiest and simplest solution.

div#sbox-content > a#formClick{
   display: none;
}

Option 2:

If option 1 doesn't work for whatever reason, you can test having fun with CSS and hide the hyperlink once the Modal box opens after which which makes it visible if this shuts.

Customize the JS to include a category rather than modifying the design and style.

window.addEvent('domready', function() {
  $('formClick').addEvent('click', function(){
    $('formClick').addClass('hidden');
    $('hiddenForm').setStyle('display','block'); 
  });
});

Load additional CSS that can make the hyperlink invisible

div#clickMeButton.hidden {
    display: none;
}

Then you'll have to overload closing event making the hyperlink visible...

Ok, and so i finally first got it to utilize a mix of another solutions given. First, I removed the javascript click event to create the shape appear, that solved the problem from the form turning up underneath the link. Next, I added new CSS for that hiddenForm ID inside the modal box and hang that to show:prevent. It seems the default handler behavior (in Joomla a minimum of) would be to adopt this content since i have have removed the handler: 'adopt' which is still implementing this content.

I understood it had been something simple, just help!

BTW - the hyperlink continues to be live, you can observe the right behavior around the demo site. Now all I have to do is then add fancy AJAX form submission and it'll be prepared for prime time.