JSFiddle - React, Tailwind, and code Playground
by Ishank Dubey
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" id="myBut" class="btn btn-primary">Show via JS</button>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Default
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- <div class="modal-header">
</div>-->
<div class="modal-body" style="height:200px;">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div style="display:inline-block;height:100px;width:30%;background-color:gray;">
<button style="position:relative;float:right;" class="glyphicon glyphicon-edit"></button>
</div>
<div style="position:relative;display:inline-block;height:200px;width:65%;background-color:;">
<div class="row">
<div class="col-xs-2">.col-md-4</div>
<div class="col-xs-2">.col-md-4</div>
</div>
<p class="bg-warning" style="position:relative;margin-top:0px;display:inline;">TestIjhsnak</p>
<p class="bg-primary" style="display:inline;"></p>
</div>
</div>
<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>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
style="width:100%; height: 100%">
<circle id="c2" cx="70" cy="70" r="50" fill="fuchsia" />
<circle...
JavaScript
$('#myModal').on('shown.bs.modal', function (e) {
});
$('#myBut').on('click', function (e) {
$('#myModal').modal('show');
$("#lab_id").text("test");
});