JSFiddle - React, Tailwind, and code Playground

by Robert Rees

HTML

<div class="modal" id="test_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">Test dialog</h4>
			</div>
			<div class="modal-body">
				<div class="test-cases">
					<div id="case-1" class="test-case">
						<div class="icon"></div>
						<h5 class="title hidden">Test1</h5>
						<div class="info"><p></p></div>
						<div class="details"><p></p></div>
					</div>
					<div id="case-2" class="test-case">
						<div class="icon"></div>
						<h5 class="title hidden">Test2</h5>
						<div class="info"><p></p></div>
						<div class="details"><p></p></div>					 
					</div>
					<div id="case-3" class="test-case">
						<div class="icon"></div>
						<h5 class="title hidden">Test3</h5>
						<div class="info"><p></p></div>
						<div class="details"><p></p></div>
					</div>
					<div id="case-4" class="test-case">
						<div class="icon"></div>
						<h5 class="title hidden">Test4</h5>
						<div class="info"><p></p></div>
						<div class="details"><p></p></div>		
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

JavaScript

function testDialog() {

	var serialized = "some data";

	$.ajax({
		type: "POST",
		url: '/tests/testDialog/',
		data: serialized,
		success: function(data) {
			$('body').append('<div id="test_modal_wrapper"></div>');
			$('#test_modal_wrapper').html(data.theMarkup);
			$("#test_modal").modal({backdrop: 'static'});
			
			$('#test_modal').on('hidden.bs.modal', function(){
				$('#test_modal_wrapper').remove();
			});
      
      loadTest(data.loadTestInfo);
		},
		error: function (response) {
			$("#notifications").html(response.responseText);
		}
	});
}