JSFiddle - React, Tailwind, and code Playground

by matox

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<a data-toggle="modal" class="btn btn-success">Open Modal</a>

<div id="dialog hidden">
    <div id="modal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 id="modal-label">Test connection</h4></div>
                <div class="modal-body"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

JavaScript

$(".btn").on("click", function() {
    $.ajax({
        type: "POST",
        url: '/echo/html/',
        data: {
            html: '',
            delay: 0.1
        },
        success: function(data) {
            $('body').append('<div id="test_modal_wrapper"></div>');
            $('#test_modal_wrapper').html(data);
            $("#modal").modal({backdrop: 'static'});

            $('#modal').on('hidden.bs.modal', function() {
                $('#test_modal_wrapper').remove();
            });
            loadTest(1, 3);
            loadTest(2, 2);
            loadTest(3, 1);
        }
    });
});

function loadTest(id, delay) {
    $.ajax({
        type: "POST",
        url: '/echo/html/',
        async: false,
        data: {
            html: '<div class="test-case"><h5>Testing connection '+ id +'</h5></div>',
            delay: delay
        },
        success: function(data) {
            $('.modal-body').append(data);
        }
    });
}