Tutorial #39 del Curso de Jquery, en este tutorial veremos el widget dilog() de Juery UI, este método nos permite crear ventanas de dialogo emergentes movibles con distintas opciones de configuración.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jquery UI - Dialog</title>
<link href="jquery-ui/jquery-ui.css" rel="stylesheet">
</head>
<body>
<div id="dialogo" title="ventana">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente ad quasi dicta, dignissimos hic ex iusto esse nisi, obcaecati magnam quae rerum nemo. Quisquam nostrum architecto culpa cumque quaerat corporis?</p>
</div>
<button type="button" id="ventana">Mostrar ventana</button>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#dialogo').dialog({
autoOpen: false,
modal: true,
show : {
effect : "blind",
duration: 1000
},
hide:{
effect: "explode",
duration: 1000
},
buttons: {
"Eliminar": function(){
alert("Se preciono el boton Eliminar");
},
Cancel: function(){
$(this).dialog("close");
}
}
});
$('#ventana').click(function(event) {
$('#dialogo').dialog("open");
});
});
</script>
</body>
</html>