JSFiddle - React, Tailwind, and code Playground

by Florent27000

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div class="row no-side-padding">
    <div class="col-sm-3 no-side-padding-2">
        <h2>Assistants</h2>
        <div id="assistants-box" class="modal_box">
            Contents of the ASSISTANTS box
        </div>
    </div>
    <div class="col-sm-3 five-padding-left no-padding-right">
        <h2>Chairs</h2>
        <div id="chairs-box" class="modal_box">
            Contents of the CHAIRS box
        </div>
    </div>
    <div class="col-sm-3 five-padding-left no-padding-right">
        <h2>Craft Fairs</h2>
        <div id="craft-fairs-box" class="modal_box">
            <h1>Contents of the CRAFT FAIRS box</h1>
        </div>
    </div>
    <div class="col-sm-3 five-padding-left no-padding-right">
        <h2>Materials</h2>
        <div id="materials-box" class="modal_box">
            Contents of the MATERIALS box
        </div>
    </div>
</div>

CSS

.modal_box{
    position:absolute;top:20%;left:20%;
    height:50px;width:30%;
    background:wheat;
    display:none;
}

JavaScript

//$('.modal_box').hide();
$('.col-sm-3').click(function(){
    $(this).find('.modal_box').modal('show');
});