JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-modal.js"></script>
<form>
<ul class="inputs-list">
<li>
<label>
<input type="checkbox" name="optionsCheckboxes" value="option1" />
<span>Option Test</span>
</label>
</li>
<li>
<label>
<input type="checkbox" name="optionsCheckboxes" value="option2" />
<span>Option 2</span>
</label>
</li>
</ul>
<div class="actions">
<a href="#" class="save-button btn large primary">Save changes »</a>
<!-- Hide the real submit button /-->
<input type="submit" class="hidden">
</div>
</form>
<div id="my-modal" class="modal hide fade">
<div class="modal-header">
<a href="#" class="close">×</a>
<h3>Are you sure?</h3>
</div>
<div class="modal-body">
<p>You haven’t selected any options.</p>
</div>
<div class="modal-footer">
<a href="#" class="okay-button btn primary">Okay »</a>
<a href="#" class="go-back-button btn secondary">Go back</a>
</div>
</div> <!-- /modal -->
CSS
ul.inputs-list li {
margin-left: 10px;
}
.hidden {
display: none
}
JavaScript
$(document).ready(function() {
// Verify if checkboxes were checked.
// If they weren't, show a modal
$('a.save-button').click(function() {
if ($("input:checked").length === 0) {
$('#my-modal').modal({
show: 'true',
backdrop: 'true',
keyboard: 'true'
});
} else {
$('form').submit();
}
// prevent click jump
return false;
});
// Let's attach a listener on form submission
$('form').submit(function() {
alert('We submitted the form!');
});
// Hide modal if "Go back" is pressed
$('#my-modal .go-back-button').click(function() {
$('#my-modal').modal('hide');
alert('We went back to the form');
});
// Hide modal if "Okay" is pressed
$('#my-modal .okay-button').click(function() {
$('#my-modal').modal('hide');
$('form').submit();
});
});