JSFiddle - React, Tailwind, and code Playground

by anubhabB

HTML

<script src="https://merkd.com/engine/ui/themes/lux/assets/js/jquery-2.1.4.min.js"></script>
<script src="https://merkd.com/engine/ui/themes/lux/assets/js/scrollbar/jquery.scrollbar.min.js"></script>
<link rel="stylesheet" href="https://merkd.com/engine/ui/themes/lux/assets/js/scrollbar/jquery.scrollbar.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="my-popup">
  Click this to make it a popup =)
</div>

CSS

.SimplePopup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://merkd.com/engine/ui/themes/lux/assets/images/trans.black.png');
}



.SimplePopup .SimplePopupContentWrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.SimplePopup .SimplePopupContentWrapper .SimplePopupContent {
    position: absolute;
    z-index: 999999999999999;

    padding: 0 !important;
    overflow: hidden;
    height: 10%;
}

.SimplePopup .SimplePopupContentWrapper .SimplePopupContent .SimplePopupContentLiteral {
    /* the content itself */
    background: white;
    padding: 0 !important;
    height: 100%;

}
.SimplePopup .SimplePopupContentWrapper>i.fa.fa-close {
    position: absolute;
    z-index: 1000000000000000;
    color: red;
    cursor: pointer;


}

JavaScript

$('.my-popup').click(function() {
	$(this).SimplePopup();
});


$.fn.SimplePopup = function() {
    var originalElement = $(this),
        autoShowPopupOnInit = false,
        showShadow = true,
        closeOnOutsideClick = true,
        pID = $(document).find('.SimplePopup').length,
        parentSelector = '#SimplePopup-'+pID,
        contentSelector = parentSelector + ' .SimplePopupContentLiteral',
        closeButtonSelector = parentSelector + ' .SimplePopupContentWrapper i.fa.fa-close';

    // Options
    var closeLeftOrRight = 'right',
        heightPercentage = 80,
        displayCloseButton = true;


    console.log(pID);

    function createPopup() {
        console.log('creating popup');
        var popupHTML = ''+
            '<div class="SimplePopup" id="SimplePopup-' + pID + '">'+
            '<div class="SimplePopupContentWrapper">'+
            '<div class="SimplePopupContent"><div class="SimplePopupContentLiteral"></div></div>'+
            '<i title="Close popup" class="fa fa-close fa-lg ani"></i>'+
            '</div>'+
            '</div>';
        $('body').append(popupHTML);
        originalElement.clone().appendTo(contentSelector);


        $(contentSelector).addClass('scrollbar-inner').scrollbar({
            onInit: function() {
                positionContentToCenterOfScreen();
                positionContentToCenterOfScreen();
            }
        });

        attachPopupClickEvents();
    }


    function destroyPopup() {
        $(parentSelector).fadeOut(function(){$(this).remove()});
    }

    function attachPopupClickEvents() {
        $(closeButtonSelector).unbind('click').click(function() {
            destroyPopup();
        });

        $(parentSelector).off('mousedown').on('mousedown',function(event) {
            if( !$(event.target).closest(contentSelector).length && !$(event.target).closest('.scroll-element').length && !$(event.target).closest(originalElement).length ) {
                if(...