您可以将现有的div复制到模式对话框吗

托尼_89

我有一个仪表板,其中包含多个面板以显示不同的信息,并且我希望能够添加一个按钮以模式显示面板。

我正在使用引导程序,我所能找到的就是已经编写的模态。我想复制一个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/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

您可以将现有的div复制到模式对话框吗

来自分类Dev

您可以在现有的Apache Geode区域上增加复制吗?

来自分类Dev

Java:将数据从对话框文本字段复制到JTable

来自分类Dev

Java:将数据从对话框文本字段复制到JTable

来自分类Dev

将所有图表从Excel复制到现有的Powerpoint

来自分类Dev

Inno Setup将文件和文件夹复制到现有的Zip文件

来自分类Dev

将现有的 jenkins 配置复制到新的 jenkins

来自分类Dev

您可以将链接器/其他依赖项等复制到其他项目吗

来自分类Dev

您可以将Azure虚拟机移动/复制到其他实例吗?

来自分类Dev

您可以将Azure虚拟机移动/复制到其他实例吗?

来自分类Dev

通过Angular-Bootstrap对话框模式将数据追加到现有json数组

来自分类Dev

可以从lubuntu中的对话框复制并粘贴吗?

来自分类Dev

在Windows 10“打开方式”对话框中添加“将URI复制到剪贴板”选项

来自分类Dev

如何将对话框位置坐标复制到另一个对话框中?

来自分类Dev

如何将实例数据复制到现有的类引用中/之上?C#

来自分类Dev

SQL将现有的列值复制到select语句中的自定义列中

来自分类Dev

使用PowerShell将文本文件数据复制到现有的Excel工作簿中

来自分类Dev

将数组键复制到另一个现有的数组键中

来自分类Dev

有没有一种方法可以将锚标记弹出窗口视为模式对话框,您可以在其中简单地单击它,然后它就会消失?

来自分类Dev

IBM Worklight-可以将Worklight部署到现有的WAS服务器吗?

来自分类Dev

证书对话框中的“复制到文件...”按钮被禁用

来自分类Dev

如何编写类似于现有的“查找/替换”对话框的eclipse插件

来自分类Dev

我可以将现有的Popover用于UIImagePickerController吗?

来自分类Dev

使用批处理文件和OpenFolderBox对话框将文件夹的内容从A点复制到B点

来自分类Dev

如何将对象导出/复制到现有的 Maya 文件

来自分类Dev

您可以在现有的GWT项目中包含GwtBootstrap3吗?

来自分类Dev

您可以在现有的GWT项目中包含GwtBootstrap3吗?

来自分类Dev

将变量传递到对话框

来自分类Dev

我可以在Google表格中重新定位无模式对话框吗?

Related 相关文章

  1. 1

    您可以将现有的div复制到模式对话框吗

  2. 2

    您可以在现有的Apache Geode区域上增加复制吗?

  3. 3

    Java:将数据从对话框文本字段复制到JTable

  4. 4

    Java:将数据从对话框文本字段复制到JTable

  5. 5

    将所有图表从Excel复制到现有的Powerpoint

  6. 6

    Inno Setup将文件和文件夹复制到现有的Zip文件

  7. 7

    将现有的 jenkins 配置复制到新的 jenkins

  8. 8

    您可以将链接器/其他依赖项等复制到其他项目吗

  9. 9

    您可以将Azure虚拟机移动/复制到其他实例吗?

  10. 10

    您可以将Azure虚拟机移动/复制到其他实例吗?

  11. 11

    通过Angular-Bootstrap对话框模式将数据追加到现有json数组

  12. 12

    可以从lubuntu中的对话框复制并粘贴吗?

  13. 13

    在Windows 10“打开方式”对话框中添加“将URI复制到剪贴板”选项

  14. 14

    如何将对话框位置坐标复制到另一个对话框中?

  15. 15

    如何将实例数据复制到现有的类引用中/之上?C#

  16. 16

    SQL将现有的列值复制到select语句中的自定义列中

  17. 17

    使用PowerShell将文本文件数据复制到现有的Excel工作簿中

  18. 18

    将数组键复制到另一个现有的数组键中

  19. 19

    有没有一种方法可以将锚标记弹出窗口视为模式对话框,您可以在其中简单地单击它,然后它就会消失?

  20. 20

    IBM Worklight-可以将Worklight部署到现有的WAS服务器吗?

  21. 21

    证书对话框中的“复制到文件...”按钮被禁用

  22. 22

    如何编写类似于现有的“查找/替换”对话框的eclipse插件

  23. 23

    我可以将现有的Popover用于UIImagePickerController吗?

  24. 24

    使用批处理文件和OpenFolderBox对话框将文件夹的内容从A点复制到B点

  25. 25

    如何将对象导出/复制到现有的 Maya 文件

  26. 26

    您可以在现有的GWT项目中包含GwtBootstrap3吗?

  27. 27

    您可以在现有的GWT项目中包含GwtBootstrap3吗?

  28. 28

    将变量传递到对话框

  29. 29

    我可以在Google表格中重新定位无模式对话框吗?

热门标签

归档