JSFiddle - React, Tailwind, and code Playground

by panchroma

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<button class="btn btn-primary">show modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="loading">Please wait</div>
      <iframe src="" frameborder="0"></iframe>
      </div>
  </div>
</div>

CSS

.loading {
    width: 300px;
    padding: 20px;
    background: orange;
    color: white;
    text-align: center;
    margin: 0 auto;
}

JavaScript

$('.btn').click(function(){

    $('.modal').on('show',function(){    
        $(this).find('iframe').attr('src','http://www.google.com')
    })
    $('.modal').modal({show:true})
    
    $('iframe').load(function() {
    $('.loading').hide();
});
    
})