¿Cómo doy estilo al cuadro de alerta con CSS?

Question

- Actualización --i he leído mucho sobre el tema intenté algunas secuencias de comandos y necesité ayuda para averiguar qué puede o no puedo hacer. La comunidad respondió todo y el siguiente es un buen punto de partida. (Respuestas aquí extraídos de la comunidad a continuación, gracias)

1. NO PUEDE overide estilo por defecto DE ALERTA. Es producido por su cliente (por ejemplo, Chrome Firefox, etc.)

2. puede usar jquery en su lugar. En lugar de utilizar un script como:

   function check_domain_input() { var domain_val = document.getElementsByName ('domain'); if (domain_val [0] .value.length> 0) { return true; } alert ('Por favor, introduzca un nombre de dominio para buscar.'); devuelve falso; }

que hace que el cliente (Firefox cromo, etc.) producen un cuadro de alerta.

2b. Usted le dice al código si algunas cosas que tiene que ocurrir en un Alertbox jQuery carga evento que se puede hacer bastante: (. Answer: Jonathan Payne y creado por Jonathan Payne Gracias)

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" type="text/css" media="all" /> 

<div onclick="check_domain_input()">Click</div> 

<div id="dialog" title="Attention!" style="display:none"> 
    Please enter a domain name to search for. 
</div> 

<script> 
    function check_domain_input() 
    {   
     $("#dialog").dialog(); // Shows the new alert box. 

     var domain_val = document.getElementsByName('domain'); 

     if (domain_val[0].value.length > 0) 
     { 
      return true; 
     } 

     $("#dialog").dialog(); 

     return false; 
    } 
</script> 

Mira la jsFiddle aquí: http://jsfiddle.net/8cypx/12/

Answer 1

Trate jQuery UI se encuentra aquí: http://jqueryui.com/demos/dialog/

Ellos tienen un rodillo tema donde se puede estilo de diálogo y cajas modales.

- EDITAR -

Respondiendo a la segunda pregunta.

Mira la jsFiddle aquí: http://jsfiddle.net/8cypx/12/

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" type="text/css" media="all" /> 

<div onclick="check_domain_input()">Click</div> 

<div id="dialog" title="Attention!" style="display:none"> 
    Please enter a domain name to search for. 
</div> 

<script> 
    function check_domain_input() 
    {   
     $("#dialog").dialog(); // Shows the new alert box. 

     var domain_val = document.getElementsByName('domain'); 

     if (domain_val[0].value.length > 0) 
     { 
      return true; 
     } 

     $("#dialog").dialog(); 

     return false; 
    } 
</script> 

Answer 2

En lugar de ventanas emergentes incorporadas del cuadro de diálogo de Javascript, que son feos e imposibles de personalizar con CSS, recomendaría usar controles de cuadro de diálogo de jQuery. Esos pueden diseñarse fácilmente, y jQuery se envía con muchos temas integrados para él también.

http://docs.jquery.com/UI/Dialog

Answer 3

Si te tengo pregunta correctamente, no creo que se puede hacer eso, ya que las ventanas emergentes están conectados al sistema del cliente Sin embargo, diseñar lo que describes no es tan difícil, ver un elemento DIV o algo así.

Answer 4

El cuadro de confirmación/alerta es parte del navegador, no su página.

Answer 5

Utilizar el siguiente plugin de http://plugins.jquery.com/msgbox/
y utilizando un código

$.alerta ('texto');

en lugar de alert ('text'); Personalizar con css