JSFiddle - React, Tailwind, and code Playground

by mstefanko

HTML

<div id="example1"><div class="bi-popup"><div id="bi-content"><div class="new">sdcdsdpojcsdsdpocsd</div></div></div></div>
        <a id="open-bimodal" href="#">OPEN</a>

CSS

/*** Window **/
.bi-popup{
  cursor: move;
  display: none;
  position: relative;
  top: auto;
  left: auto;
  margin: 0 auto;
}

/*** Buttons **/
.green_btn_container, .grey_btn_container {
    font-family: Tahoma,Verdana,Arial !important;
    font-size: 11px;
    margin: 0;
    padding: 0;
    width: auto;
    cursor: pointer;
    
}

.green_btn_left, .grey_btn_left, .disabled_btn_left {
    display: block;
    width:16px;
    height:32px;
    float: left;
}
.green_btn_left {
    background: url(https://na5.brightidea.com/core/images/btn_default_left.png) 0px -32px no-repeat;
}

.disabled_btn_left {
    background: url(https://na5.brightidea.com/core/images/btn_default_left.png) 0px 0px no-repeat;
}
.grey_btn_left {
    background: url(https://na5.brightidea.com/core/images/btn_gray_left.png) 0px -0px no-repeat;
}

.green_btn_center {
    display: block;
    color: #FFFFFF !important;
    font-weight: bold;
    height:32px;
    line-height: 30px;
    float: left;
    text-align: center;
    padding: 0px 10px;
    text-shadow: 0 -1px 0 #999999 !important;
    background: url(https://na5.brightidea.com/core/images/btn_default_center.png) 0px -32px repeat-x;
}

.disabled_btn_center {
    display: block;
    color: #919191 !important;
    font-weight: bold;
    height:32px;
    line-height: 30px;
    float: left;
    text-align: center;
    padding: 0px 10px;
    background-position: 0px 0px;
    cursor: move!important;
    
}

.grey_btn_center {
    display: block;
    color: #333333 !important;
    font-weight: normal;
    height:32px;
    line-height: 30px;
    float: left;
    text-align: center;
    padding: 0px 10px;
}

.disabled_btn_left{
    cursor: move!important;
} 

.disabled_btn_right{
    cursor: move!important;
} 
.disabled_btn_center {
    background: url(https://na5.brightidea.com/core/images/btn_default_center.png) 0px 0px repeat-x;
}
.grey_btn_center {
    background: url(https://na5.brightidea.com/core/images/btn_gray_center.png) 0px 0px...

JavaScript

(function($){
    //fn to center modal
    $.fn.center = function () {
    this.css('position','absolute');
    this.css('top', (($(window).height() - this.outerHeight()) / 2) +
                                                $(window).scrollTop() + 'px');
    this.css('left', (($(window).width() - this.outerWidth()) / 2) +
                                                $(window).scrollLeft() + 'px');
    return this;
    }
    $.fn.bimodal = function(options, callback) {
        var defaults = {
            opacity: 50,
            containerId: 'bi-modal-container',
            dataId: 'bi-modal-body',
            zIndex: 20003,
            escClose: true,
            modal: true,
            drag: true,
            btnText: 'Action',
            topHead: 'Header',
            subHead: 'Header',
            iconSrc: 'https://elements.brightidea.com/core/images/icon_assign_proposal_24x24.png',
            closeTip: 'Press Esc to close',
            closeText: 'Close',
            maxWidth: null,
            minWidth: null,
            maxHeight: null,
            minHeight: null,
            callback: function(){}                                
        };
        
         if (typeof callback == 'function') { // make sure the callback is a function
            callback.call(this); // brings the scope to the callback
        }

         var o = $.extend(defaults, options);
         
         

    // call the callback and apply the scope:
    options.callback.call(this);

         if($('.bi-modal-container').length <= 0){
            var bi_modal_container = $('<div class="bi-modal-container"></div>');
            var bi_modal_header = $('<div class="bi-modal"><div class="bi-modal-header"><a class="bi-close" href="# " title="Press Esc to close"><div id="bi-close-label" title="' + o.closeTip + '">' + o.closeText + '</div></a><span id="bi-top-header">' + o.topHead + '</span></div></div>');
            var bi_modal_content = $('<div class="bi-modal-body"><div...