从 iframe 内部关闭 Bootstrap 模态并转到父页面的特定部分

Posted 2023-05-09

【中文标题】从 iframe 内部关闭 Bootstrap 模态并转到父页面的特定部分

【英文标题】：Close Bootstrap modal from inside iframe and go to a specific section of parent page

【发布时间】：2016-06-26 13:00:40

【问题描述】：

index.html

<a href="" data-toggle="modal" data-target="#myModal">Open Modal</a>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog" style="width:100%;margin: 0px auto;">
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-body modalIframe">
            <iframe src="services/abc.html" frameborder="0"  ></iframe>
       </div>
    </div>
  </div>
</div>

脚本

    window.closeModal = function()
        $('#myModal').modal('hide');
    ;
    $('#contactClick,.closeMain').click(function()
        window.parent.closeModal();
    );

abc.html

<button type="button" class="btn btn-default serviceButton fontSize16px" id="contactClick">Contact us directly   </button>

单击此按钮后，我需要转到一个名为hire-us 的部分，即它应该重定向到 index.html#hire-us。 我试图给出锚标记而不是按钮并在 href 中给出路径，但它不起作用。 请帮我解决这个问题。

【参考方案1】：

使用 Jquery Click 功能在特定部分滚动

直接联系我们

<div id="hire-us">

</div>


<script>

 $('#contactClick').click(function()
$('html, body').animate(
                scrollTop: $('#hire-us').offset().top
            , 'slow');  

);
</script>

【讨论】：

这不起作用。 contactClick 按钮位于 abc.html 页面中，该页面在

【参考方案2】：

这对我有用（在 iframe 页面内）：

  $('#btnCancel').click(function() 
      parent.$('#ModalEquipment').modal('hide');
   );

ModalEquipment -> 主页面中模式的名称。

<div class="modal fade" id="ModalEquipment" tabindex="-1" role="dialog"      aria-labelledby="videoModal" aria-hidden="true">
       <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-body">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <div>
                     <iframe src="" frameborder="0"></iframe>
                  </div>
             </div>
         </div>
     </div>
   </div>