在iframe上打開Bootstrap Modal窗口
[英]Opening Bootstrap Modal window On iframe
問題描述
我想打開一個iframe的模式對話框。 當用戶單擊時，按鈕應加載URL並以模式形式彈出URL內容。
但是，由於某些原因，此操作將失敗，如下面的代碼所示。 我是從http://jsfiddle.net/limeric29/C3LkL/借用這個想法的
該示例使用JQuery 1.8，但我想使用3.3。 我懷疑這就是失敗的原因。
$('a.btn').on('click', function(e) { e.preventDefault(); var url = $(this).attr('href'); $(".modal-body").html('<iframe width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency="true" src="'+url+'"></iframe>'); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script> <a data-toggle="modal" class="btn" href="http://www.bing.com" data-target="#myModal">click me</a> <div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Modal header</h3> </div> <div class="modal-body"> </div> </div>
有人帶領我嗎？
1 個解決方案
解決方案1
0 已采納 2019-02-13 07:11:31
嘗試這個
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Modal Example</h2> <!-- Trigger the modal with a button --> <a id="zoe" href="https://www.bing.com" data-toggle="modal" data-target="#myModal">Click Me</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <script> $('#zoe').on('click', function(e) { e.preventDefault(); var url = $(this).attr('href'); $(".modal-body").html('<iframe width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency="true" src="'+url+'"></iframe>'); }); </script> </body> </html>
Flask/Bootstrap 按鈕未打開模式 window 且沒有錯誤消息
[英]Flask/Bootstrap button not opening modal window and without error message
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.