Durante mucho tiempo, he intentando comprender el mótivo de por qué el icono de cierre de un dialog en Jquery no aparece. Y la solución que he encontrado a este hecho es una mezcla de perplejidad, asombro y enorme respeto por las personas que ofrecen soluciones como éstas a través de foros. Este problema se asocia a la etiqueta Dialog Jquery.
Si llevamos mucho tiempo desarrollando una página web o hemos heredado una anterior, es posible que nos encontremos con éste problema de diseño. Las ventanas que suelen tener una “X” de cierre, no aparece con un dialog de Jquery.
¿Qué es lo que ocurre? ¿Por qué no aparece esta “X”?
La respuesta es muy simple a la vez que impactante.
La culpa la tiene Bootstrap. Éste conocido Framework hace que no aparezca este pequeño y necesario icono.
Cuando vamos a llamar a los paquetes de javascript hay que determinar cuál de los dos va antes o después.
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script src="js/bootstrap.min.js"></script>
Pues hay que ponerlo al revés. Primero hay que cargar el paquete de bootstrap y después el de Jquery. De esta manera podremos visualizar este pequeño icono.
<script src="js/bootstrap.min.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Una de las cosas que más gracia me ha hecho ha sido la persona que nos dá la respuesta en los foros con el siguiente mensaje.
El mundo no dejará de sorprendernos.