JSFiddle - React, Tailwind, and code Playground

by Md. Atiquzzaman Soikat

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Modal -->
<div class="modal fade" id="detallePorAfiliadoDeuda" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>This is a large modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<button id="open" class="btn btn-sm btn-grey "> OPEN </button>

JavaScript

$(document).ready(function() {
    ConsultarEmpleador.initialise();
});

var ConsultarEmpleador = (function() {
    var init = function() {
        ConsultarDeuda.initialise();
        ConsultarDemanda.initialise();
    }
    return {
        initialise: init
    }
})();


var ConsultarDeuda = (function() {
    var ConsultaDeudaGrid, gridConsultaDeuda;

    var detalleAfiliadoDeuda = function(e) {
        e.preventDefault();
        e.stopPropagation();
        alert("hii");
       var popup = PRIMAUtil.popup('#detallePorAfiliadoDeuda',{ backdrop: 'static', keyboard: false });

    };

    var init = function() {
       
        $("#open").on("click", detalleAfiliadoDeuda);
        $("#detallePorAfiliadoDeuda").on('show.bs.modal', function() {
            console.log("open");
            $(this).off('shown.bs.modal');
        });
        $("#detallePorAfiliadoDeuda").on('hide.bs.modal', function() {
            console.log("close");
        });
    }
    return {
        initialise: init,
    }
})();

var ConsultarDemanda = (function() {

    var init = function() {};
    var verEmpleador = function() {};

    return {
        initialise: init,
        verEmpleador: verEmpleador
    }
})();
var PRIMAUtil ={};
PRIMAUtil.popup = function(container, config) {
      container = container.jquery ? container : $(container);

      var cfg = {
        backdrop:'static',
        keyboard: false
      };  
      
      $.extend(cfg, config);
      container.modal(cfg);     
     
      var dialog = container.modal('show');
      console.log(dialog);
      return dialog;
    };