0
我想創建一個嵌入式網站或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引導模式與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 */
/**
\t * /!\ By using this feature, you force the header and footer to be placed
\t * in an absolute position. You must handle by yourself the margin of the
\t * content.
\t */
}
.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>
\t <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 -->