Question

I am using Joomla 1.5.22 with Mootools 1.1. I have a module with a form contained in a hidden div that I want to open in Joomla’s built in modal box. The problem I have is that when I click the link the form opens in the modal box, but it also opens the div in the module on 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 I get the form to only show up in the modal box?

You can see what I am talking about here – http://www.internextion.com/

It’s the Call Back Module. I already added the handler: ‘adopt’ as suggested below, now the result is a little different. The target div still shows up below the link, but now the modal window contains the link rather than the target.

Answer 1

Ok, so I finally got it to work with a combination of the other answers given. First, I removed the javascript click event to make the form appear, that solved the issue of the form showing up below the link. Next, I added new CSS for the hiddenForm ID within the modal box and set that to display:block. It appears that the default handler behavior (in Joomla at least) is to adopt the content since I have removed the handler: 'adopt' and it is still adopting the content.

I knew it was something simple, thanks for the help!

BTW – the link is still live, you can see the correct behavior on the demo site. Now all I need to do is add some fancy AJAX form submission and it will be ready for prime time.