如何使用 jquery 获取模式的内容？答案

【问题标题】：How to get content of a modal using jquery?如何使用 jquery 获取模式的内容？
【发布时间】：2020-03-20 17:18:46
【问题描述】：

如何使用 jquery 从网页中获取按钮的内容？该按钮打开一个模式。我正在另一个模式中显示此内容。

$(document).ready(function() {
  $("#btn1").click(function() {
    $("iframe").load("someUrl #someId",function(response) {

    });
  });
});

模态如下

<div id="test">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal4">Table 2</button>

<!-- Modal -->
<div class="modal fade" id="myModal4" role="dialog">
    <div class="modal-dialog modal-lg">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-body">
                <table style="border: 1px solid black; border-collapse: collapse; padding: 15px; width: 100%; text-align: left; ">
                    <tr>
                        <td>Hello </td>
                        <th> </th>
                        <th> </th>
                        <td>world </td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

【问题讨论】：

所以你想获得 modal 的内容，而不是 button - 对吗？如果是这样，除非模式的内容在最初加载的 HTML 中，否则您将无法执行此操作。这也是假设您没有进行跨域 AJAX 调用，无论如何这可能会被 CORS 阻止
这两个应用程序都在我的 PC 上本地运行，因此 CORS 已经被使用。是的，我想获取模态的内容。实际上是模态中的一个表格

标签： jquery html ajax

【解决方案1】：

感谢this 和this 对 SO 的回答，我能够归档我想要的内容。也许，它可以帮助某人

<script>
    $(document).ready(function(){
    $.get('remoteUrl').then(function (html) {
        // Success response
        var $mainbar = $(html).find('#ID_of_Your_Remote_Modal');
        $("#iframe").append ('<iframe id="iframe"></iframe>');

        setTimeout ( function () {
                var iframeBody  = $("#iframe").contents().find("body");

                iframeBody.append ($mainbar);
            },
            333
        );
    }, function () {
        // Error response
        document.write('Access denied');
        });
    });

</script>

【讨论】：

【解决方案2】：

$(document).ready(function() {
  $("#btn1").click(function() {
    $("iframe").load("someUrl #someId",function(response) {
        $('#firstDiv').dialog({
        modal: true,
        title: "Confirmation",
        open: function() {
          var markup = 'Hello World';
          $(this).html(response);
        },
        buttons: {
          Ok: function() {
            $( this ).dialog( "close" );
          }
        }
      });  //end confirm dialog
    });
  });
});

我希望，您使用的是 Jquery 模式。否则您可以动态设置内容。

【讨论】：

我刚刚用模态的内容修改了问题。我想在我的第二个应用程序中从此模式中获取表格。此外，我刚刚尝试使用您提到的代码，但给了我一个错误“未捕获的 TypeError：$(...).dialog is not a function”
你需要包含jquery-ui js。