html - Bootstrap modal with iframe full screen inside modal body -

i trying create full screen modal embedded website or iframe. however, having issues iframe inside <div class="modal-body">. modal overlayed , shows page. it's missing button controls such as: <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> <button type="button" class="btn btn-primary">save changes</button> </div> , title: <h4 class="modal-title">modal title</h4> however, want have button closes modal. can continue browsing original page instead of pressing button on browser.

so when user finished viewing iframe inside modal can go original page. of close button , modal closes itself.

$('head').append('<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">');

body {    padding-top: 50px;  }    /*modal fullscreen */    .modal.modal-fullscreen {    /* maximize main wrappers on screen */    /* make parent wrapper of modal box full-width block */    /* remove borders , effects on content */    /**  	 * /!\ using feature, force header , footer placed  	 * in absolute position. must handle margin of  	 * content.  	 */  }  .modal.modal-fullscreen .modal-dialog,  .modal.modal-fullscreen .modal-content {    bottom: 0;    left: 0;    position: absolute;    right: 0;    top: 0;  }  .modal.modal-fullscreen .modal-dialog {    margin: 0;    width: 100%;    animation-duration:0.6s;  }  .modal.modal-fullscreen .modal-content {    border: none;    -moz-border-radius: 0;    border-radius: 0;    -webkit-box-shadow: inherit;    -moz-box-shadow: inherit;    -o-box-shadow: inherit;    box-shadow: inherit;    /* change bg color below */   /* background:#1abc9c; */  }  .modal.modal-fullscreen.force-fullscreen {    /* remove padding inside body */  }  .modal.modal-fullscreen.force-fullscreen .modal-body {    padding: 0;  }  .modal.modal-fullscreen.force-fullscreen .modal-header,  .modal.modal-fullscreen.force-fullscreen .modal-footer {    left: 0;    position: absolute;    right: 0;  }  .modal.modal-fullscreen.force-fullscreen .modal-header {    top: 0;  }  .modal.modal-fullscreen.force-fullscreen .modal-footer {    bottom: 0;  }

<!-- latest compiled , minified css -->  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  <!-- optional theme -->  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rhyon1irsvxv4nd0jutlngaslcjuc7uwjduw9svrlvryoopp2bwygmgjqixwl/sp" crossorigin="anonymous">    <!-- latest compiled , minified javascript -->  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-tc5iqib027qvyjsmfhjomalkfuwvxzxupncja7l2mcwnipg9mgcd8wgnicpd7txa" crossorigin="anonymous"></script>  <div class="container">            <div class="text-center">               <h1 class="">welcomeo</h1>                <p class="lead">have @ website!</p>              <button class="btn btn-primary" data-toggle="modal" data-target="#mymodalfullscreen" contenteditable="false">open fullscreen modal</button>          </div>      </div>    <!-- /.container -->  <div class="modal fade modal-fullscreen  footer-to-bottom" id="mymodalfullscreen" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true">      <div class="modal-dialog animated zoominleft">          <div class="modal-content">              <div class="modal-header">                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>                  	<h4 class="modal-title">modal title</h4>                </div>              <div class="modal-body">               <iframe src="https://www.android.com" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">      browser doesn't support iframes  </iframe>              </div>              <div class="modal-footer">                  <button type="button" class="btn btn-default" data-dismiss="modal">close</button>                  <button type="button" class="btn btn-primary">save changes</button>              </div>          </div>          <!-- /.modal-content -->      </div>      <!-- /.modal-dialog -->  </div>  <!-- /.modal -->

seems inline style of z-index being high blocked it. modal-title , modal-footer doesn't go away.

i transferred code codepen it's easier play around , test on "fullscreen" should work there. here's codepen

hope helps!