您可以将现有div复制到模式对话框 [英] Can you copy an existing div to a modal dialog
问题描述
我有一个带有多个面板的仪表板来显示不同的信息,我希望能够添加一个按钮以模式显示面板。
I have a dashboard with multiple panels to display different information and I would like to be able to add a button to display the panel in a modal.
我正在使用bootstrap,我能找到的只是已经编写过的模态。我想复制div标签的内容,这是一个面板然后在模型中显示,但我不确定如何去做。面板的html如下所示。面板确实包含一个表,但我已经删除了代码。我环顾四周,但似乎找不到我需要的解决方案。我知道我需要使用jQuery,复制面板并将其添加到模态对话框的内容中。我试过这样做但没有运气。我已经包含了一个小提示,以显示我采取的方法这里这确实启动了模式,但内容不是显示也不关闭它的按钮。
I am using bootstrap and all I can find is modals already written. I would like to copy the content of a div tag which is a panel and then display that in the model, but I am unsure as how to go about it. The html for the panel can be seen below. The panel does contain a table but I have cut the code down. I have looked around but I can't seem to find a solution for what I need. I understand that I need to use jQuery, copy the panel and add it to the contents of the modal dialog. I have tried to do this but had no luck. I have included a fiddle to show the approach I have taken Here this does launch the modal but the content is not displayed nor the button to close it.
非常感谢任何帮助。
面板的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>
我要显示的面板的屏幕截图:
< img src =https://i.stack.imgur.com/pddxG.pngalt =面板我需要复制到模态>
Screenshot of the panel I want to display:
推荐答案
请试试这个
<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>
仅在Mark Up中更改我删除了类隐藏
Only Change in Mark Up is I removed the class hide
$('.focusButton').click(function(){
var newRow = $(this).parent().parent().parent('.sample').clone();
$('#SampleModal .modal-body').html(newRow);
$('#SampleModal').modal();
});
检查这个小提琴: http://jsfiddle.net/hoja/qsbkqc9m/12/
这篇关于您可以将现有div复制到模式对话框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!