Show DIV element in Twitter Bootstrap Modal along with DOM

Question

I have a simple div tag, that contains a button. When ever user clicks on this button it simply shows an alert.

<div id="myDiv">
    <input type="button" id="btn" value="Click Me" />
</div>

and I also have a empty twitter bootstrap modal.

<div class="modal hide" id="myModal">
    <div class="modal-header">
        <button class="close" data-dismiss="modal">×</button>
         <h3>Modal header</h3>

    </div>
    <div class="modal-body"></div>
</div>

I have a second button, when ever the user clicks on it, it opens the bootstrap modal. I want to show "myDiv" in bootstrap modal when ever the user clicks on the second button. I want "myDiv" to be present in when ever modal opens and also I want to be present in my HTML document. So that I can always access it with out creating second button in modal.

Any idea how can I do that ?

Answer 1

I think this is what you were going for so basically on the modal show we append that button to the modal body.

$("#myDiv") .appendTo(".modal-body");

but we aren't done because after modal close we need to get it back in the body so we do:

 $('#myModal').on('hide.bs.modal', function (e) {
$("#myDiv") .prependTo("body");     
})

Here is a working fiddle:

http://jsfiddle.net/zcb3h/2/

I hope this is what you were looking for.