[英]Can you copy an existing div to a modal dialog
我有一个仪表板,其中包含多个面板以显示不同的信息,并且我希望能够添加一个按钮以模式显示面板。
我正在使用引导程序,我只能找到已经编写的模态。 我想复制一个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>
我要显示的面板的屏幕截图:
请尝试这个
<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>
我仅删除了标记更改中的课程隐藏
$('.focusButton').click(function(){
var newRow = $(this).parent().parent().parent('.sample').clone();
$('#SampleModal .modal-body').html(newRow);
$('#SampleModal').modal();
});
检查此小提琴: http : //jsfiddle.net/hoja/qsbkqc9m/12/
您可以通过使用以下代码来实现
使用JQuery:
var html = $(id).html();
使用Javascript:
var html = document.getElementById(id).innerHTML;
希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.