En este apartado puedes ver las clases básicas de un cuadro de diálogo y como a partir de ellas ir modificando los estilos CSS de cada una de las partes en que se compone el cuadro de diálogo, las clases principales son ...
Para cambiar el fondo del cuadro de diálogo: .ui-dialog
Para cambiar el contenido del cuadro de diálogo, tamaño de fuente, color de fuente, ...: .ui-dialog .ui-widget-content
Para cambiar el fondo de la cabecera: .ui-dialog .ui-widget-header
Para cambiar el contenido de la cabecera, tamaño de fuente, color de fuente, ...:: .ui-dialog .ui-dialog-titlebar
A continuación podéis ver un ejemplo de como modificar los estilos CSS de un cuadro de diálogo de Jquery UI ...
<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#dialog" ).dialog({autoOpen: false});
$("#open_dialog").click(function(){
$( "#dialog" ).dialog("open");
dialog_responsive();
});
function dialog_responsive(){
/*Diseño responsable para los cuadros de diálogo*/
$("div").each(function(){
if ($(this).attr("role") == "dialog")
{
/*Modifica las propiedades CSS a tu gusto*/
$(this).css({width: "100%", minWidth: "250px", minHeight: "150px", left: "0px", top: "50px"});
}
});
}
});
</script>
<style>
/*para cambiar el fondo del cuadro de diálogo*/
.ui-dialog
{
background: #000000;
}
/*Para cambiar el contenido del cuadro de diálogo, tamaño de fuente, color de fuente, ...*/
.ui-dialog .ui-widget-content
{
color: #FFFFFF;
font-family: arial;
}
/*Para cambiar el fondo de la cabecera*/
.ui-dialog .ui-widget-header
{
background: #005533;
}
/*Para cambiar el contenido de la cabecera, tamaño de fuente, color de fuente, ...*/
.ui-dialog .ui-dialog-titlebar
{
color: #FFFFFF;
font-family: arial;
}
</style>
</head>
<body>
<input type="button" id="open_dialog" value="Abrir cuadro de diálogo">
<div id="dialog" title="Basic dialog">
<p>
Cuadro de diálogo de Jquery UI autoajustable a la resolución de la ventana, DISEÑO RESPONSABLE - RESPONSIVE DESIGN
Cuadro de diálogo con estilos CSS modificados.
</p>
</div>
</body>
</html>
1 comentario:
Como puedo cambiar el icono del boton y tambien darle estilo al boton?
(El de cerrar, el tachesito xD) porfa
Publicar un comentario