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

【问题标题】：Close Bootstrap modal from inside iframe and go to a specific section of parent page从 iframe 内部关闭 Bootstrap 模态并转到父页面的特定部分
【发布时间】：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" height="650px" width="100%"></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 中给出路径，但它不起作用。请帮我解决这个问题。

【问题讨论】：

标签： javascript jquery html twitter-bootstrap iframe

【解决方案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 页面中，该页面在中调用，而雇用我们部分位于 index.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>

【讨论】：