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">&times;</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

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -