JSFiddle - React, Tailwind, and code Playground

by kneidels

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="span3 modeItem well well-small" style="margin: 20px;">
      <div class="bg"> &nbsp;</div>
    	<p class="modeName"><strong>3 columns</strong></p>
        <p><a href="javascript:;" data-modeid="4" class="btn modeContent">edit</a></p>
	</div>

  <div class="modal hide" id="mode4">
    <div class="clearfix" id="maincontainer24"> 
      <!-- header -->
      <div class="modal-header noprint"> <a data-dismiss="modal" class="close">×</a>
        <h3>edit options</h3>
      </div>
      <div class="modal-body">
      
      </div>
       <div class="modal-footer noprint"> 
        <!--<a class="btn btn-primary">Save Changes</a>--> 
        <a data-dismiss="modal" class="btn">Close</a> </div>
    </div>
  </div>

JavaScript

$(function(){
	
	$(".modeContent").click(function(){
		var modeid = $(this).data('modeid');
		$("#mode"+modeid).modal();
		
	});
});