onclick to open a colorbox with preset html

Question

I will start that I saw/read through the similar questions, none of them addresses what I ask, as far as I can see.

I have the following HTML in my page:

<div id="approve-users-yesno">
   <h1>Approve the following users?</h1>
    <hr />
   <ul id='approve-users-list'>
</ul>
<label>Additional comments: <textarea rows="5" cols="20" id="approve-users-comment"></textarea></label>
<div style="margin-top: 50px;text-align:right;">
<button class="ulink" onclick='approveUsersSubmit();'>YES</button>
<button class="ulink" onclick='cleanCHKBXSelection("approveUsersIDS");'>NO</button>
</div>
</div>

I need to open a colorbox with this html (above) in it. Right now I am doing a hack, which has issues with:

$.colorbox({html:$('#approve-users-yesno').html())});

What would be the way without replication of the DOM?

Answer 1

As per the docs, use the "inline" option. jsFiddle.

var $stuff = $('#approve-users-yesno');
$.colorbox({inline:true, href:$stuff});