Javascript 是否可以将现有div复制到模式对话框

我有一个多面板的仪表板来显示不同的信息，我想能够添加一个按钮，以显示模式面板

我正在使用bootstrap，我能找到的只是已经编写好的modals。我想复制一个div标签的内容，它是一个面板，然后在模型中显示它，但我不确定如何进行。面板的html可以在下面看到。这个面板确实包含一个表，但我已经删去了代码。我环顾四周，但似乎找不到解决我需要的问题的办法。我知道我需要使用jQuery，复制面板并将其添加到模态对话框的内容中。我试过这么做，但没有成功。我已经包括了一个小提琴，以显示我采取的方法，这确实启动了模态，但内容没有显示，也没有关闭它的按钮

任何帮助都将不胜感激

面板的HTML代码：

<div class="panel sample panel-yellow message">
    <div class="panel-heading">
        <h3 class="panel-title">
            <i class="fa fa-flask fa-fw"></i>Sample Updates 
            <i class="fa fa-spinner fa-spin sample "></i>
            <a id="refreshMessage" class="refreshButton pull-right" href="#"><span class="fa fa-refresh"></span></a>
            <a id="hideMessage" class="refreshButton pull-right" href="#"><span class="fa fa-arrow-up"></span></a>
            <a id="focusMessage" class="focusButton pull-right" href="#"><span class="fa fa-eye"></span></a>
        </h3>
    </div>
    <div class="panel-body">
        <center>
            <h5 class="text-warning">Table shows samples created or modified in the last ten minutes</h5>
        </center>
    </div>
</div>

更新示例
表显示了在过去十分钟内创建或修改的示例

我要显示的面板的屏幕截图：

---

您可以使用以下代码来实现这一点

使用JQuery：

var html = $(id).html();

使用Javascript：

var html = document.getElementById(id).innerHTML;

希望这有帮助。

请试试这个

<div class="panel sample panel-yellow message">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <i class="fa fa-flask fa-fw"></i>Sample Updates <i class="fa fa-spinner fa-spin sample ">
                        </i>
                        <a id="refreshMessage" class="refreshButton pull-right" href="#"><span class="fa fa-refresh"></span></a>
                        <a id="hideMessage" class="refreshButton pull-right" href="#"><span class="fa fa-arrow-up"></span></a>
                        <a id="focusMessage" class="focusButton pull-right" href="#"><span class="fa fa-eye"></span></a>
                    </h3>

                </div>
                <div class="panel-body">
                <div class="table-responsive">
                    <table class="table table-condensed table-hover table-bordered table-responsive">
                        <thead>
                            <tr>
                                <th>
                                    New Samples
                                </th>
                                <th>
                                    Modified Samples
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <span class="sampleCount"></span>
                                </td>
                                <td>
                                    <span class="sampleCount2"></span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    </div>
                    <center>
                        <h5 class="text-warning">
                            Table shows samples created or modified in the last ten minutes</h5>
                    </center>
                </div>
            </div>


<div id="SampleModal" class="modal fade" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
    </div>

---

检查一下这把小提琴：

这是显而易见的，但无论如何，为了完整性，我还是这么说；他还需要为要从中复制html的div指定一个id。。

$('.focusButton').click(function(){
    var newRow = $(this).parent().parent().parent('.sample').clone();
    $('#SampleModal .modal-body').html(newRow);
    $('#SampleModal').modal();
});