Bind Control.Modal to div contents w/o an href

How can I bind the contents of Control.Modal to a div without using the href property?

Thanks!

Posted August 3rd, 2007 at 4:48pm by richardsun

I don't know if this is the best way, but it works:

        Hover here to see the conetents.
        This should show in the modal window.

Posted August 5th, 2007 at 2:43pm by phil

Ack, ok apparently I don't know how to get this to look right using the built in code warppers. Lets try again:

<a href="javascript:void(0);" id="testLink" onmouseover="new Control.Modal('testLink',{ hover: true, contents: function() { return $('someContent').innerHTML } });">Hover here to see the conetents.</a>
<div id="someContent" style="display:none;">This should show in the modal window.</div>

Posted August 5th, 2007 at 2:47pm by phil

Thanks Phil,

I actually had to create a new Control.Modal instance and then call open() on it:

<a href="#" onclick="m = new Control.Modal(false,{ contents: function() { return $('someContent').innerHTML } });m.open()">Passing Control.Modal html using a function.</a>
<div id="someContent" style="display:none;">This should show in the modal window.</div>

Posted August 6th, 2007 at 12:12pm by richardsun

I've been using this to accomplish the same thing.

My reasoning behind it is I want the link to actually go to a real page if the user has JavaScript disabled for some reason, but otherwise show the contents of a div on the page.

<a href="page.html" id="page_link">Show modal or go to page</a>
<script type="text/javascript">
  Event.observe(window,'load',function() {
    new Control.Modal("page_link", { contents: $('page_contents').remove().innerHTML });
  });
</script>
<div id="page_contents">This should show in the modal window.</div>

Posted August 8th, 2007 at 10:18am by PotatoSalad