模态体内iframe全屏的Bootstrap模态

时间：2017-09-13 14:16:21

标签： html css twitter-bootstrap

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

enter image description here

因此，当用户在模态中查看iframe后，他可以返回原始页面。在关闭按钮的帮助下，模态关闭。

enter image description here 

$('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 -->

2 个答案:

答案 0 :(得分：1)

它尝试帮助完整

$('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;
}

.close {
    float: right;
    font-size: 81px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
    right: 50%;
    position: relative;
    background: #000 !important;
    z-index: 1111111;
}
<!-- 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">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <div class="modal-content">
            <div class="modal-header">
              
                	<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 -->

答案 1 :(得分：1)

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

我将您的代码转移到了一个代码库，因此更容易使用它并在“全屏”上进行测试，但它应该在那里工作。这是codepen

希望它有所帮助！

相关问题
最新问题