Skip to main content

Adding a Modal Box to your Community

Under the advanced section of a page (mouse over action button and select advanced) in Javascript Code place this code

<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function(){
    $('modal_click').addEvent('click', function(){
        var modal = new Modalbox({
                       'ismodal':true,
                       'width':'400px',
                       'height':'325px',
                       'title':'Modal',
                       'closetext':'Close',
                       'adopt':$('modal_box')
                  });
    });
});
//]]>
</script>

 

Then in an HTML widget where you want to put the link for the modal box paste this code into the HTML source where you want the button. It is easier if you start with a new widget.


<p>Click <a id="modal_click">here</a> for modal box!</p>

 

Then in another HTML widget on the same page place this:

<div id="modal_box" class="hide">
<p>text you want</p>
</div>

 

Replace "Text you want" with the text that you would like.

This last widget will appear blank it is being hidden by the JavaScript in the advanced console but by editing it you can insert text and HTML in your pop up modal box.

 

0 Comments

Would you like to comment?

You must be a member. Sign In if you are already a member.

 
  • 200 views
  • 2 versions
  • 0 comments
  • 0 followers
     
Avg. Rating:
Post Date:
November 24, 2011
Posted By:
IGLOO Webmaster
Versions:
v.2

Viewed 200 times