html - Bootstrap 模式，模式体内有 iframe 全屏

Question

我正在尝试创建一个带有嵌入式网站或 iframe 的全屏模式。但是，我在 <div class="modal-body"> 内的 iframe 中遇到问题。模式是覆盖的，它只显示页面。它缺少按钮控件，例如:<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>和标题:<h4 class="modal-title">Modal title</h4>但是，我想要一个关闭模式的按钮。这样您就可以继续浏览原始页面，而不必按浏览器上的后退按钮。

因此，当用户完成查看模式内的 iframe 时，他可以返回到原始页面。在关闭按钮的帮助下，模式会自行关闭。

$('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 the main wrappers on the screen */
  /* Make the parent wrapper of the modal box a full-width block */
  /* Remove borders and effects on the content */
  /**
	 * /!\ By using this feature, you force the header and footer to be placed
	 * in an absolute position. You must handle by yourself the margin of the
	 * 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 the padding inside the 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 and 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 and 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 a look at this 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;">
    Your 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 -->

Answer 1

似乎 z-index 的内联样式太高阻止了它。您的 modal-title 和 modal-footer 并没有真正消失。

我将您的代码转移到了 codepen，这样可以更轻松地使用它并在“全屏”上测试它，但它应该可以在那里工作。这是codepen

希望对你有帮助!