JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<div id="container">
    <div class="rect">Double Click Me!</div>
</div>

<div id='mask' class='modal fade'>
    <div class="modal-container"> </div>	 
</div>

CSS

#container { height: 600px; width: 600px; border: 2px solid rgb(0,0,0); }

.rect { height: 300px; width: 200px; border: 1px solid red; margin: 125px auto; }

.modal-container { position: absolute; border: 3px solid white; }

JavaScript

$('.rect').dblclick(function()
{
    var clonedElem = $('.modal-container');
    
    clonedElem.css({'width' : '35%', 'height' : '90%'});
    clonedElem.offset({left : ($(window).width()/3) });
            
    clonedElem.html(function()
    {
        var html = '<h4>Big Rectangle</h4>';
        return html;	
    });
    
    $('#mask').modal();
});