JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#QuestaoModal">
Abrir Modal
</button>
<div class="bs-example">
<div id="QuestaoModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body" width="200px">
<span id="modal-time"></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
</div>
</body>
JavaScript
function timer(elToUpdate) {
var maxTime = 60;
elToUpdate.text(maxTime);
var interval = setInterval(function () {
if (maxTime > 0) {
maxTime--;
elToUpdate.text(maxTime);
}
else {
clearInterval(interval);
}
}, 1000);
return interval;
}
$("#QuestaoModal").on('shown.bs.modal', function () {
var t = timer($('#modal-time'));
$(this).on('hidden.bs.modal', function () {
clearInterval(t);
$('#modal-time').text("");
$(this).off('hidden.bs.modal');
});
});