Mostrando entradas con la etiqueta widget dialog jQuery pop-uo parámetros confirmación cancelación iconos. Mostrar todas las entradas
Mostrando entradas con la etiqueta widget dialog jQuery pop-uo parámetros confirmación cancelación iconos. Mostrar todas las entradas

sábado, 23 de febrero de 2013

El widget Dialog de jQuery UI

El widget dialog() es bastante sencillo, pero poderooosooooo. Nos permitirá hacer ventanas de mensaje, sin que sean consideradas ventanas de diálogo o pop-ups. Con sus diferentes parámetros podemos dar opciones de confirmación y cancelación, asi como mostrar diferentes íconos. También podemos darle efectos de entrada y de salida.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/ui-lightness/jquery-ui-1.10.1.custom.min.css" rel="stylesheet"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(inicio);
function inicio(){
    //$("#mensaje").dialog( {show: {effect: "blind",duration: 1000},hide: {effect: "explode",duration: 1000}});
    /*$("#mensaje").dialog( {modal: true,
    height:280,
    width:500,
    buttons:{Continue: function() {
                       $( this ).dialog( "close" );
                       },
             Cancel: function() {
                       $( this ).dialog( "close" );
                       }
    }
    }); */
    $("#mensaje").dialog( {modal: true,
    height:280,
    width:500,
    buttons:{Ok: function() {
                       $( this ).dialog( "close" );
                       }
    }
    });
}
</script>
<title>Base de UI</title>
<style>
.centra{
    font-weight:bold;
    text-align:center;
}
</style>
</head>

<body>
<div id="mensaje" title="Advertencia">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 50px 0;"></span>La siguiente página contiene material real y explicito,
que podría afectar la sensibilidad
del espectador.</p><p class="centra">Se recomienda discreción.</p>
</div>

</body>
</html>