JSFiddle - React, Tailwind, and code Playground

by Rasmus Bergström

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<!-- Modal -->
<div class="modal fade bs-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body"> <i id="target" class="fa fa-spinner fa-spin hidden"></i>
                <p>Are you sure?</p>
                <a class="btn btn-danger">Yes, delete it</a>
                <a id="no-keep-it" class="btn btn-default">No, I'll reconsider</a>
            </div>
        </div>
    </div>
</div>
<script>
    
</script>
<div id='images_list'>
    <div class='pull-left bordered'> <a href="http://rack.supersecret.com/526-3.jpg" target="_blank"><img alt="526 3" class="small_image" src="http://placehold.it/314x450" title="526-3.jpg (314 x 450)" /></a>

        <div class='tiny'> <a href="http://www.google.com/search?q=upc 9780767880268" target="_blank">9780767880268</a>

        </div> <a class="btn btn-mini btn-danger delete-btn" data-remote="true" href="#" title="Delete this image"><i class="icon-trash icon-white icon-large"></i> Delete</a>

    </div>
    <div class='pull-left bordered'> <a href="http://rack.supersecret.com/526-4.jpg" target="_blank"><img alt="526 4" class="small_image" src="http://placehold.it/391x500" title="526-4.jpg (391 x 500)" /></a>

        <div class='tiny'> <a href="http://www.google.com/search?q=upc 9780767880268" target="_blank">43396154162</a>

        </div> <a class="btn btn-mini btn-danger delete-btn" data-remote="true" href="#" title="Delete this image"><i class="icon-trash icon-white icon-large"></i> Delete</a>

    </div>
</div>
<script>
    
</script>

CSS

.fa {
    font-size: 30px;
}

JavaScript

$(function () {
    $('.delete-btn').click(function () {
        $('#myModal').modal({
          backdrop: 'static'
        },'toggle');
        $('#target').toggleClass('hidden');
        window.setTimeout(function () {
            $('#target').toggleClass('hidden');
            $('#myModal').modal('toggle');
        }, 2000);
        $('#no-keep-it').click(function(){
          $('#target').toggleClass('hidden');
          $('#myModal').modal('toggle')
        })
    });
});