close bootstrap modal from iframe page when click on button

 

 Problem: i have button in Modal Page (using iframe to load another page inside)
i need to click on close button in child page to close the modal and refresh data in parent page
1- button code

     <asp:Button CssClass="btn btn-info m-bot15 closeStyle" runat="server" ID="btnReturnToMyTasks" Text="اغلاق الشاشة"  
         Width="150px" CausesValidation="False" meta:resourcekey="btnReturnToMyTasksResource1" OnClientClick='window.parent.$("#modal").modal("hide"); parent.refreshData(true);'/>  

------------------------------------
2- parent page script to refresh data when click on X button or when press on previous button from child page inside iframe

 //////////////////////////////////////////////////////////////////////////////////// refresh data after modal close  

       $(window).bind("load", function () {  
         $(".closeStyle").click(function () {  
           refreshData(true);  
         });  
       });  
       function refreshData(args) {  
         try {  
           if (args) {  
             var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();  
          masterTable.fireCommand("RebindGrid", "0");  
        }  
         else  
          return false;  
      }  
      catch (e) {  
        //do nothing  
      }  
       }  
       ////////////////////////////////////////////////////////////////////////////////////////////////////////////////

----------------------------------------------------------------------------------
Modal Html (inside master or parent page)

<!-- Modal -->  
     <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">  
       <div class="modal-dialog">  
         <div class="modal-content">  
           <div class="modal-header">  
             <!--onclick="alert('now in close'); window.location.reload();"-->  
             <button type="button" class="close closeStyle" data-dismiss="modal" aria-hidden="true" id="btnclose">&times;</button>  
             <h4 class="modal-title" id="myModalLabel2"></h4>  
           </div>  
           <div class="modal-body">  
             <iframe src="#" id="iframepopup" style="background-color: white;"></iframe>  
           </div>  
           <div class="modal-footer">  
             <button type="button" class="btn btn-primary closeStyle" data-dismiss="modal" id="Button1">اغلاق الشاشة</button>  
           </div>  
         </div>  
       </div>  
     </div>  

       
     -----------------------------------------------------------------------------------------
script to create modal height according to screen height

<script type="text/javascript">  
      $(document).ready(function () {  

        $('#modal').on('show.bs.modal', function () {  
          $('.modal-content').css('height', $(window).height() * 0.9);  
          $('.modal-body iframe').css('height', $(window).height() * 0.75);  
        });  
      });  
     </script>