Question

I am using JQuery colorbox like that: There is a link(with a button) that has a class cboxElement. The html of colorbox is at that link, I mean at another JSP file. When user click that link colorbox appears and everything is OK.

However how can I use colorbox for something within my page between div tags I mean without writing another JSP file that will be non-visible for users and it will appear after a user clicks a button)?

EDIT: I found that: If inline ‘true’ a jQuery selector can be used to display content from the current page. Example:

$("#inline").colorbox({inline:true, href:"#myForm"});

I think this is what I am looking for but I couldn’t find any example of it?

Answer 1

Take a look at the example for inner HTML on this page. I believe that is what you’re looking for.

If you look at the source of the page, you’ll find this HTML:

<!-- This contains the hidden content for inline calls -->
    <div style='display:none'>

        <div id='inline_example1' style='padding:10px; background:#fff;'>
        <p><strong>This content comes from a hidden element on this page.</strong></p>
        <p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.<br />
        <a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p>

        <p><strong>If you try to open a new ColorBox while it is already open, it will update itself with the new content.</strong></p>
        <p>Updating Content Example:<br />

        <a class="example5" href="../content/flash.html">Click here to load new content</a></p>
        </div>
    </div>

This is the link that launches ColorBox on click:

<p><a class='example8' href="#">Inline HTML</a></p>

This is the binding for ColorBox:

$(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});