JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
<div class="container">
  <h2>Small Modal</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" id="mybutton" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Small Modal</button>
       <div style="display:none" id="anothermymodal">    
      
            <div class="modal-body">
              <p>This is a small modal.</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
      </div>
   
</div>
 
 
 
  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
     <div class="modal-dialog">
       <div class="modal-content"  id="mycontent">      		
         <div class="inner-div">
            <img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/5-1.gif"/>           
         </div>
       </div>
     </div>
</div>

CSS

.inner-div
{
  margin:0 auto;
  width: 100px;
  height: 100px;
  border-radius: 3px;
  display: table;
  vertical-align:middle; 
  text-align:center;
  background-color:red;
  position:relative;
  
}

img {
   position:absolute;
   left:50%;
   top:50%;
   transform: translate(-50%,-50%);
    display:inline-block;
    margin-left: auto;
    margin-right: auto;
}

JavaScript

$("#mybutton").click(function(){  
  
         //  $.ajax("").done(function(){
             //          $("#mycontent").html( $("#anothermymodal").html()); 
             //          })
           setTimeout(function(){         
           
                    $("#mycontent").html( $("#anothermymodal").html());
             },10000);
             
  });