$(function () {
var $btn = $('#btnConfirmar');
$btn.on("click", function () {
ShowDialog();
});
})
function ShowDialog() {
$('#spanMessage').html('¿Está seguro(a) de guardar los cambios?');
$("#dialogConfirm").dialog({
resizable: false,
height: 140,
modal: true,
title: 'Mensaje Modal',
buttons: {
'Aceptar': function () {
$("<div><span>Se guardaron los cambios correctamente</span></div>").appendTo(document.body);
$(this).dialog("close");
},
'Cancelar': function () {
$(this).dialog("close");
}
}
});
}
External resources loaded into this fiddle:
<div class="ui-state-highlight ui-corner-all">
<table>
<tr>
<td>
<label>Ejemplo modal</label>
</td>
<td>
<input type="button" id="btnConfirmar" value="Confirmar" class="ui-state-default ui-corner-all" />
</td>
</tr>
</table>
</div>
<div id="dialogConfirm"><span id="spanMessage"></span>
</div>
* {
font-size:12px;
font-weight:bold;
}