Bootstrap 3.3.1模式彈出窗口從iframe內部關閉

Question

我有一個iframe通過jQuery和bootstrap，我需要在iframe頁面本身內添加一個Close按鈕，而不是從打開的彈出窗口。

我嘗試在html彈出頁面中添加<button type="button" class="btn btn-default" data-dismiss="modal">Close</button> ，但它什么也沒做。

這是帶有外部close按鈕的當前代碼，以及bbc.com的示例頁面鏈接：

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://bootstrapdocs.com/v3.3.1/docs/dist/js/bootstrap.min.js"></script> <link href="https://bootstrapdocs.com/v3.3.1/docs/dist/css/bootstrap.min.css" rel="stylesheet"/> <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Popup page</button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="padding:0px"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> </div> <div class="modal-body"> <iframe src="https://bbc.com" style="width:500px; height:500px; max-width:100%; max-height:100%" frameborder="0" allowtransparency="true"></iframe> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> 

我發現這篇文章但不確定如何在當前案例中實現它。

Answer 1

你可以添加這樣的按鈕，並為iframe提供一些id'blackout'。

<button type="button" class="btn btn-default" onclick="window.jQuery('#blackout').toggle('slow');">Open/Close</button>