成功后使用 iframe 关闭模式答案

【问题标题】：Close modal with iframe after success成功后使用 iframe 关闭模式
【发布时间】：2023-03-19 14:58:01
【问题描述】：

我有一个带有 iframe 的 Bootstrap 模式。该 iframe 中有一个带有上传者的联系表格。我想在提交表单时关闭模式。

你是怎么做到的？

我尝试使用

success:function(){
    $('#modal .close', parent.document).trigger('click');
}

但这显然被禁止跨域访问。

模态：

    <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title" id="myModalLabel">{{ 'Vraag uw beregeningsplan aan' | t }}</h4>
          </div>
          <div class="modal-body">
            <iframe></iframe>
          </div>


        </div>
      </div>
    </div>



    <script>
      $(document).ready(function() {

        $('#modal').on('shown.bs.modal',function(){
          $(this).find('iframe').attr('src','//link-to-form/')
        });

      });
    </script>

任何帮助表示赞赏！

【问题讨论】：

如果联系表格是您的，您为什么不放弃iframe 并使用ajax get 用表格的html 填充modal-body。然后连接该提交按钮以关闭对话框

标签： jquery bootstrap-modal

【解决方案1】：

从描述中无法确定 iframe 中的表单是您自己的表单还是某些外部 Web 表单。

如果它是你自己的表单，那么在内部表单中编写这个 jquery 代码

$(document).ready(function () {

            $(document).on('submit', '#myForm', function () {                    

                window.parent.$('#modal').modal('hide');

            });

        });

myForm 是内部表单的 ID

【讨论】：