Close Bootstrap modal from inside iframe and go to a specific section of parent page

Question

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>

SCRIPT

    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>

On click of this button I need to go to a section called hire-us ie it should redirect to index.html#hire-us. I tried to give anchor tag instead of button and give path in href but it doesn't work. Please help me solve this.

Answer 1

Use the Jquery Click function to scroll on particular section

Contact us directly

<div id="hire-us">

</div>


<script>

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

});
</script>

Answer 2

This worked for me (Inside the iframe page):

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

ModalEquipment -> the name of the modal in the principal page.

<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>