jquery - Javascript iframe not load in bootstrap popup (modal) -
i've try load wysiwyg
editor in bootstrap modal iframe
not load 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 load iframe
? possible? 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
miuranga, have @ code in fiddle , see if can wysiwyg, don't use 1 not sure if can copy code it.
but way iframe modal in code.
just note in fiddle, code displays in iframe , i'm sure can not have iframe
in iframe
. not show url want display. have tested , work.
urls google.com restricted display in iframes.
why used microsoft.com.
view 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>
Comments
Post a Comment