modal ofter modal
by thetom
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="row">
<div class="span12">
<h2>title</h2>
<a class="btn" id="btn-start">Start example</a>
</div>
</div>
<!--Finestra modale-->
<div id="finestraModal" class="modal hide fade" data-width="820" data-backdrop="static">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="modalHeaderTitle"></h3>
</div>
<div class="modal-body" id="modalBodyText">
</div>
<div class="modal-footer">
<a href="#" id="modalClose" class="btn">Chiudi</a>
<a href="#" id="modalConfirm" class="btn btn-primary">Conferma</a>
</div>
</div>
CSS
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
JavaScript
function apriModal(header, messaggio, callback, conferma) {
var re = new RegExp("</?\w+\s+[^>]*>");
$("#modalHeaderTitle").text(header);
if (messaggio.match(re)) {
$("#modalBodyText").html(messaggio);
}
else {
$("#modalBodyText").html("<p>" + messaggio + "</p>");
}
(!conferma) ? $("#modalConfirm").hide() : $("#modalConfirm").show();
$("#finestraModal").modal('show')
$("#modalConfirm").off().click(function () {
if (conferma) {
$("#finestraModal").modal('hide')
conferma();
}
});
$("#modalClose").show();
$("#modalClose").off().click(function () {
if (callback) {
callback();
}
$("#finestraModal").modal('hide');
});
}
$("#btn-start").click(function(){
apriModal("Hi","Hi",null,function(){
apriModal("Hi2","Hi2");
});
});