JSFiddle - React, Tailwind, and code Playground

by Mohamed Farouk

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<div id="content">

</div>

JavaScript

$(document).ready(function(){
//assume below var is template get by http request
var template = '<div id="myModal" class="modal fade" tabindex="-1" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">Modal title</h4></div><div class="modal-body">     <p>One fine body&hellip;</p></div><div class="modal-footer">       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div></div></div>';

$('#content').html(template);
$('#myModal').on('shown.bs.modal', function() {
  $('#myInput').focus()
});
$('#myModal').modal('show');
});