Jquery dialog box show content in dialog box but hide from original html

Question

I am using dialog() jquery library function to show all html inside ‪#‎main‬-content div into a dialog box as follows:

var preview = $("#main-content").dialog({
    modal: true,
    width: 1024,
    height: 600,
    overlay: {
        backgroundColor: "#000000",
        opacity: 0.5
    },
    buttons: {
        Ok: function () {
            $(this).dialog("close");
        },
        Cancel: function () {
            $(this).dialog("close");
        }
    }
});

It works fine. But when opup box is open the html inside #main-content is swept to the dialog box and all html content inside #main-content have been removed from the original page. How can I keep the all html as before and show it as a copy in dialog box?

Answer 1

Clone the element and use the dialog on that instead

var clone = $("#main-content").clone(true);
var preview = clone.dialog({
    modal: true,
    width: 1024,
    height: 600,
    overlay: {
        backgroundColor: "#000000",
        opacity: 0.5
    },
    buttons: {
        Ok: function () {
            $(this).dialog("close");
        },
        Cancel: function () {
            $(this).dialog("close");
        }
    }
});