กล่องโต้ตอบ Jquery แสดงเนื้อหาในกล่องโต้ตอบ แต่ซ่อนจาก html ดั้งเดิม

ฉันใช้ฟังก์ชันไลบรารี่กล่องโต้ตอบ () jquery เพื่อแสดง html ทั้งหมดภายใน div #‎main-content ลงในกล่องโต้ตอบดังนี้:

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

มันทำงานได้ดี แต่เมื่อเปิดกล่อง opup html ภายใน #main-content จะถูกกวาดไปที่กล่องโต้ตอบ และเนื้อหา html ทั้งหมดภายใน #main-content จะถูกลบออกจากหน้าเดิม ฉันจะเก็บ html ทั้งหมดไว้เหมือนเดิมและแสดงเป็นสำเนาในกล่องโต้ตอบได้อย่างไร


person Abdus Sattar Bhuiyan    schedule 30.04.2014    source แหล่งที่มา


คำตอบ (1)


โคลนองค์ประกอบและใช้กล่องโต้ตอบแทน

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");
        }
    }
});
person Derek    schedule 30.04.2014