JSFiddle - React, Tailwind, and code Playground

by wrxsti85

HTML

<a href="">Link</a>

<a href="">Link</a>

<a href="">Link</a>

<a href="">Link</a>

<a href="">Link</a>

<a href="">Link</a>

<div id="dialog-modal" title="Loading">
    <center>
        <img style="margin-top:30px" src="http://diy-code.com/486.gif" />
    </center>
</div>

CSS

#box1 {
    width: 150px;
    height: 150px;
    background-color: red;
    display: inline-block;
}
#box2 {
    width: 150px;
    height: 150px;
    background-color: yellow;
    display: inline-block;
}
#box3 {
    width: 150px;
    height: 150px;
    background-color: blue;
    display: inline-block;
}
#box4 {
    width: 150px;
    height: 150px;
    background-color: orange;
    display: inline-block;
}
#dialog-modal {
    display:none;
}

JavaScript

$('a').click(function (e) {
    e.preventDefault();
    $("#dialog-modal").dialog({
        height: 150,
        modal: true
    });

    /*
    // Your POST request goes here
    $.post('yourFileHere.php', formData, function(data){
		$("#dialog-modal").html('<p>Loading Complete</p>');
        $("#results").html(data);
    });	
    */
});