CODEWITHSUNDEEP
jquerydialog
Abdus Sattar Bhuiyan
Abdus Sattar Bhuiyan

Reputation: 3074

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

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?

Upvotes: 0

Views: 86

Answers (1)

Derek
Derek

Reputation: 4751

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");
        }
    }
});

Upvotes: 1

Related Questions