JSFiddle - React, Tailwind, and code Playground
by russau
HTML
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Confirm purchase!</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Confirm purchase!</h4>
</div>
<div class="modal-header">
<span class="label label-primary">Add to Cart</span>
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="label label-default">Purchaser Info</span>
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="label label-default">Order Summary</span>
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="label label-default">Order Confirmation</span>
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="label label-default">Assign Licenses</span>
<ol class="breadcrumb">
<li><a href="#">Home</a>
</li>
<li><a href="#">Library</a>
</li>
<li class="active">Data</li>
</ol>
</div>
<!-- <div class="alert alert-danger" role="alert">Danger</div> -->
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<label class="col-sm-2 control-label">Language</label>
<div class="col-sm-10">English</div>
</div>
...
JavaScript
$('#btn').click(function () {
var v = $('[name="options"]:checked').val();
alert(v);
});
$('#clear').click(function () {
$('.btn-primary').removeClass('active');
$('.btn-primary').addClass('disabled');
});