Javascript iframe not load in bootstrap popup (modal)
Question
I've try to load WYSIWYG editor in bootstrap modal but that iframe is not load as below.
<iframe id="desc_ifr" frameborder="0" src="javascript:""" allowtransparency="true" style="width: 100%; height: 410px; display: block;">
<html>
<head></head>
<body></body>
</html>
</iframe>
How can I load that iframe ? Is that possible? I know out side iframe can load in below methoad.
$('.modal').on('shown.bs.modal',function(){
$(this).find('iframe').attr('src','http://www.google.com')
})
Any suggestions ? Thanks
1 answers
solution1
1 2015-05-31 10:01:22
Miuranga , have a look at the code in this Fiddle and see if you can get it into your WYSIWYG, I don't use one so not sure if you can just copy the code into it.
But the way to get a iframe into a modal is in the code.
Just note that in the Fiddle, the code actually displays in a iframe and I'm sure you can not have a iframe in another iframe . They will not show the url you want to display. I have tested it and it does work.
Also some urls like google.com are restricted to display in iframes.
This is why I used microsoft.com.
View the Run Code Snippet below.
<html> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" > <body> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#incidentModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade bs-example-modal-lg" id="incidentModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header bg-primary"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="myModalLabel">Modal Title</h4> </div> <!-- /.modal-header --> <!--/.modal-header --> <div class="modal-body"> <div class="container-fluid"> <div class="modal-body row"> <iframe id="desc_ifr" src="http://microsoft.com" style="width: 100%; height: 410px;" allowtransparency="true" > </iframe> </div> </div> <!-- /.container-fluid--> </div> <!-- /.modal-body--> <div class="modal-footer bg-info"> <button type="button" class="btn btn-success" data-dismiss="modal">Close</button> </div> <!-- /.modal-footer --> </div> <!-- /.modal-content--> </div> <!-- /.modal-dialog modal-lg--> </div> <!-- /.modal fade bs-example-modal-lg --> <!-- </span></button></div></div> --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.