JSFiddle - React, Tailwind, and code Playground

by rexable

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div id="left" class="side"></div>
<div id="right" class="side"></div>
<div id="forside" class="modal fade">
    <div class="modal-content">
        hello world
    </div>
</div>

SCSS

body {
    width: 100vw;
    height: 100vh;
}
#left {
    width: 50%;
    height: 100%;
    float: left;
    background-color: blue;
}
#right {
    width: 50%;
    height: 100%;
    float: left;
    background-color: green;
}
.modal-content {
    width: 50px;
    height: 100px;
}

JavaScript

opposite = function( side ) {
    return side === $('#left') ? $('#right') : $('#left')
};
$('.side').click(function(){
    var self = $(this)
    $('.modal-content').position( self );
    $('#forside').modal( 'toggle' );
});
$.fn._position = $.fn.position;
$.fn.position = function( ofobj ) {
    var self = $(this), 
        $ofobj, 
        base_offset;
    console.log ( "positioning start" );    
    if ( !ofobj ){
        return self._position();
    } else {
        $ofobj = $(ofobj);
    }
    base_offset = $ofobj.offset();
    console.log ( base_offset );
    base_offset.left += $ofobj.outerWidth() / 2;
    base_offset.top += $ofobj.outerHeight() / 2;
    console.log ( base_offset );
    base_offset.left -= self.outerWidth() / 2;
    base_offset.top -= self.outerHeight() / 2;
    console.log ( base_offset );
    self.css( base_offset );
}