Cuadro de diálogo jQuery UI: falta el icono de cierre

188

Estoy usando un tema jQuery 1.10.3 personalizado. Descargué todo directamente del rodillo de temas y no he cambiado nada intencionalmente.

Creo un cuadro de diálogo y obtengo un cuadrado gris vacío donde debería estar el icono de cierre: Captura de pantalla del icono de cierre perdido

Comparé el código que se genera en mi página:

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
    <spanid="ui-id-2" class="ui-dialog-title">Title</span>
    <button class="ui-dialog-titlebar-close"></button>
</div>

al código generado en la página de demostración de diálogo :

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
    <span id="ui-id-1" class="ui-dialog-title">Basic dialog</span>
    <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close">
        <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
        <span class="ui-button-text">close</span>
    </button>
</div>

EDITAR: jQueryUI genera las diferentes partes del código , no yo, por lo que no puedo simplemente agregar las etiquetas span sin editar el archivo jqueryui js, que parece una elección mala / innecesaria para lograr la funcionalidad normal.

Aquí está el javascript utilizado que genera esa parte del código:

this.element.dialog({
    appendTo: "#summary_container",
    title: this.title(),
    closeText: "Close",
    width: this.width,
    position: {
        my: "center top",
        at: ("center top+"+(window.innerHeight*.1)),
        collision: "none"
    },
    modal: false,
    resizable: false,
    draggable: false,
    show: "fold",
    hide: "fold",
    close: function(){
        if(KOVM.areaSummary.isVisible()){
            KOVM.areaSummary.isVisible(false);
        }
    }
});

Estoy perdido y necesito ayuda. Gracias por adelantado.

Xion Dark
fuente
1
¿Ha verificado si el archivo de imagen para el icono existe en su sistema de archivos?
Tiquelou
Sí, la hoja de imagen del icono existe y está en la ubicación correcta.
Xion Dark

Respuestas:

443

Llego tarde a esto por un tiempo, pero te voy a volar la cabeza, ¿listo?

La razón por la que esto está sucediendo es porque está llamando a bootstrap, después de llamar a jquery-ui.

Literalmente, intercambie los dos para que en lugar de:

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>

se vuelve

<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

:)

Editar - 26/06/2015 - esto sigue atrayendo interés meses después, así que pensé que valía la pena editarlo. Realmente me gusta la solución noConflict ofrecida en el comentario debajo de esta respuesta y aclarada por el usuario Pretty Cool como una respuesta separada. Como algunos han reportado problemas con la información sobre herramientas de bootstrap cuando se intercambian los scripts. Sin embargo, no experimenté ese problema porque descargué la interfaz de usuario de jquery sin la información sobre herramientas, ya que no lo necesitaba porque bootstrap. Así que este problema nunca se me ocurrió.

Editar - 22/07/2015 - ¡No confundir jquery-uicon jquery! Si bien el JavaScript de Bootstrap requiere que jQuery se cargue antes, no depende de jQuery-UI. Por jquery-ui.jslo tanto, puede cargarse después bootstrap.min.js, mientras que jquery.jssiempre debe cargarse antes de Bootstrap.

David G
fuente
77
Esto solucionó mi problema. Incluí los recursos en este orden: 1) JQuery core 2) bootstrap 3) JQueryUI. Gracias por tu ayuda; ¡mejor tarde que nunca! PD: me hiciste volar la cabeza.
Xion Dark
66
Incluso más tarde ... ¿Puede explicar por qué el pedido de bootstrap tiene algo que ver con eso?
AndyC
44
Si cambia el orden Bootstrap antes de la interfaz de usuario de Jquery, la información sobre herramientas de Bootstrap no funcionará.
vee
44
Si bien esto no es realmente una buena solución, lo voté porque ofrece una forma rápida de verificar que este es el problema. Personalmente, usaré la solución de Raul Riveros al final porque simplemente intercambiar los dos scripts causa muchos otros problemas mayores. Por cierto, estaba un poco alucinado cuando lo vi.
krowe
18
Si no desea cambiar el orden de Bootstrap y jQuery UI, también puede arreglar el botón: $.fn.bootstrapBtn = $.fn.button.noConflict(); stackoverflow.com/a/23428433/402517
l.poellabauer
45

Este es un comentario sobre la respuesta principal, pero sentí que valía la pena su propia respuesta porque me ayudó a resolver el problema.

Si desea mantener Bootstrap declarado después de la interfaz de usuario de JQuery (lo hice porque quería usar la información sobre herramientas de Bootstrap), declarar lo siguiente (lo declaró después $(document).ready) permitirá que el botón aparezca nuevamente (respuesta de https://stackoverflow.com/ a / 23428433/4660870 )

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality
Muy genial
fuente
Esta es una forma bastante hábil de hacer las cosas sin molestar demasiado a las llamadas. +1 por lo mismo.
Aalok Mishra
interferir con las clases de Button
Stefano Mtangoo
1
El problema con esta solución es que esto romperá el código donde desee utilizar la funcionalidad del botón de arranque, como el botón ('cargando'). Para asegurarse de que la funcionalidad del botón bootstrap existente todavía funciona, reemplace todas las referencias de llamadas de función "button ()" de bootstrap con "bootstrapBtn ()". (Sí, sé que los comentarios del código implican esto, pero pensé que valía la pena decirlo explícitamente).
Kornél Regius
¿Tu editor no se queja de la falta de punto y coma?
R. Schreurs el
22

Esto parece ser un error en la forma en que se envía jQuery. Puedes arreglarlo manualmente con alguna manipulación dom en el Dialog Openevento:

$("#selector").dialog({
    open: function() {
        $(this).closest(".ui-dialog")
        .find(".ui-dialog-titlebar-close")
        .removeClass("ui-dialog-titlebar-close")
        .html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span>");
    }
});
KyleMit
fuente
8
Para su información para futuros lectores, puede extender ui.dialog (enlace) para que no tenga que duplicar esta funcionalidad abierta en cada llamada.
John MacIntyre
2
Esto funcionó bastante bien. La X estaba un poco más a la izquierda de lo normal ... aunque no estoy seguro exactamente por qué.
ashlar64
Gran solución! Sin embargo, en mi caso, removeClass (...) era innecesario y estaba causando el botón X fuera de lugar a la izquierda de la ventana de diálogo. Simplemente encadenar el método html () al método find () hizo el trabajo. Gracias.
Aamir
16

Esto se informa como roto en 1.10

http://blog.jqueryui.com/2013/01/jquery-ui-1-10-0/

Phillip el 29 de enero de 2013 a las 7:36 am dijo: En las versiones de CDN, falta el botón para cerrar el diálogo. Solo está la etiqueta del botón, el ícono de interfaz de usuario de span es erróneo.

Descargué la versión anterior y la X para el botón de cierre muestra una copia de seguridad.

Robert
fuente
Estoy usando 1.10.3 pero al menos ahora me siento menos loco. Elegí ignorarlo por ahora. Gracias.
Xion Dark
Puedo confirmar que esto sigue siendo un problema en 1.10.3
Frug
Sigue igual en 1.10.4
Dbloch
Mismo problema en 1.12.1
TetraDev
15

Encontré tres soluciones:

  1. Puedes cargar bootsrap primero. Y ellos cargan jquery-ui. Pero no es buena idea. Porque verás errores en la consola.
  2. Esta:

    var bootstrapButton = $.fn.button.noConflict();
    $.fn.bootstrapBtn = bootstrapButton;

    ayuda Pero otros botones se ven terribles. Y ahora no tenemos botones de arranque.

  3. Solo quiero usar estilos de arranque y también quiero tener un botón de cierre con un ícono. He hecho lo siguiente:

    Cómo se ve el botón de cierre después de la corrección

    .ui-dialog-titlebar-close {
        padding:0 !important;
    }
    
    .ui-dialog-titlebar-close:after {
        content: '';
        width: 20px;
        height: 20px;
        display: inline-block;
        /* Change path to image*/
        background-image: url(themes/base/images/ui-icons_777777_256x240.png);
        background-position: -96px -128px;
        background-repeat: no-repeat;
    }
Yauheni Charniauski
fuente
Excelente! Si no tiene el archivo de imagen o ningún tema específico instalado, puede obtenerlo aquí: jqueryui.com/themeroller . Descargue el tema y seleccione los componentes que necesita (en este caso, diálogo). Luego descargue, extraiga, abra el tema o la carpeta de imágenes y copie el archivo de imagen que coincida con su tema en su proyecto. Luego cambie la referencia en el CSS proporcionado por Yauheni en su respuesta.
Exel Gamboa
Su punto 3 resolvió el problema para mí. Solo tengo que hacer pequeños ajustes en el ancho, la altura y la posición del fondo para que el botón se vea como yo quería. Gracias.
Vimalan Jaya Ganesh
9

Tuve el mismo problema exacto, tal vez ya verificaste esto pero lo resolviste simplemente colocando la carpeta "images" en la misma ubicación que jquery-ui.css

Juan Hernández
fuente
3
En realidad, esta es la respuesta que resolvió el problema para mí, o al menos lo aclaró. Tenía una página de prueba que hacía referencia a la copia en línea (es decir, code.jquery.com / ... ) de jquery-ui.css y en ese caso apareció la "X". Sin embargo, en mi página de proyecto real, que tenía el archivo .css en una carpeta css local, la "X" no se mostraba. Copiar la carpeta "images" a mi carpeta css local, junto con mi archivo .css, solucionó el problema.
Dave Marley
5

Me quedé atrapado con el mismo problema y después de leer y probar todas las sugerencias anteriores, intenté reemplazar manualmente esta imagen (que puedes encontrar aquí ) en el CSS después de descargarla y guardarla en la carpeta de imágenes en mi aplicación y listo, ¡problema resuelto!

Aquí está el CSS:

.ui-state-default .ui-icon {
        background-image: url("../img/ui-icons_888888_256x240.png");
}
Raul Rivero
fuente
3

Estoy usando jQuery UI 1.8.17 y tuve el mismo problema, además de que se aplicaron hojas de estilo CSS adicionales a elementos de la página, incluido el color de la barra de título. Entonces, para evitar otros problemas, apunté los elementos exactos de la interfaz de usuario usando el siguiente código:

$("#mydialog").dialog('widget').find(".ui-dialog-titlebar-close").hide();    
$("#mydialog").dialog('widget').find('.ui-icon ui-icon-closethick').hide();

Luego agregué un botón de cierre en las propiedades del cuadro de diálogo en sí: ...

modal : true,
title: "My Dialog",
buttons: [{text: "Close", click: function() {$(this).dialog("close")}}],
...

Por alguna razón tuve que apuntar a ambos elementos, ¡pero funciona!

James Drinkard
fuente
3

Sé que esta pregunta es antigua, pero acabo de tener este problema con jquery-ui v1.12.0.

Respuesta corta Asegúrese de tener una carpeta llamada Imagesen el mismo lugar que tiene jquery-ui.min.css. La carpeta de imágenes debe contener las imágenes encontradas con una nueva descarga de jquery-ui

Respuesta larga

Mi problema es que estoy usando gulp para fusionar todos mis archivos css en un solo archivo. Cuando hago eso, estoy cambiando la ubicación de jquery-ui.min.css. El código CSS para el diálogo espera una carpeta llamada Imagesen el mismo directorio y dentro de esta carpeta espera iconos predeterminados. Como Gulp no estaba copiando las imágenes en el nuevo destino, no mostraba el ícono x.

Júnior
fuente
1

Como referencia, así es como extendí el método abierto según la sugerencia de @ john-macintyre:

$.widget( "ui.dialog", $.ui.dialog, {
	open: function() {
		$(this.uiDialogTitlebarClose)
			.html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span><span class='ui-button-text'>close</span>");
		// Invoke the parent widget's open().
		return this._super();
	}
});

deansimcox
fuente
1
  just add in css
 .ui-icon-closethick{
 margin-top: -8px!important;
margin-left: -8px!important;

}

Shashidhar
fuente
1

Si está llamando al diálogo () dentro de la función js, puede usar los siguientes códigos de conflicto del botón de arranque

 <div class="row">
   <div class="col-md-12">
       <input type="button" onclick="ShowDialog()"  value="Open Dialog" id="btnDialog"/>
   </div>
</div>

<div style="display:none;" id="divMessage">
    <table class="table table-bordered">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Giri</td>
            <td>Prasad</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Bala</td>
            <td>Kumar</td>
            <td>24</td>
        </tr>
    </table> 
</div>



<script type="text/javascript">
    function ShowDialog()
    {
        if (typeof $.fn.bootstrapBtn =='undefined') {
            $.fn.bootstrapBtn = $.fn.button.noConflict();
        }

        $('#divMessage').dialog({
            title:'Employee Info',
            modal:true
        });
    }
    </script>
giri-webdev
fuente
1

Un hombre sabio una vez me ayudó.

En la carpeta donde jquery-ui.cssse encuentra, cree una carpeta llamada "imágenes" y copie los archivos a continuación:

ui-icons_444444_256x240.png

ui-icons_555555_256x240.png

ui-icons_777620_256x240.png

ui-icons_777777_256x240.png

ui-icons_cc0000_256x240.png

ui-icons_ffffff_256x240.png

y aparece el ícono de cerrar.

Boris Prashchurovich
fuente
0

Simplemente agregue lo que falta:

<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">close</span>
Lee abundante
fuente
3
No puedo No creo esa parte del html, jquery sí. Agregué más información a mi pregunta para aclarar este punto.
Xion Dark
0

Estoy teniendo este problema también. Aquí está el código que se inserta para el botón de cierre:

Del desarrollador web que muestra el código creado por jquery

Cuando apago el style = "display: none:" en el botón, aparece el botón de cerrar. Entonces, por alguna razón, esa pantalla: ninguna; se está preparando, y no veo cómo controlar eso. Entonces, otra forma de abordar esto podría ser simplemente anular la pantalla: ninguna. Sin embargo, no veo cómo hacerlo.

Noto que la respuesta publicada por KyleMit funciona, pero hace un botón X de aspecto diferente.

También noto que este problema no afecta todos los diálogos en mis páginas, sino solo algunos de ellos. Algunos diálogos funcionan como se esperaba; otros no tienen título (es decir, el espacio que contiene el título está vacío) mientras el botón de cierre está presente.

Estoy pensando que algo está muy mal y podría no ser el momento para 1.10.x.

Pero después de más trabajo, descubrí que en algunos casos los títulos no se configuraban correctamente, y después de arreglar eso, el botón de cierre X reapareció como debería ser.

Solía ​​configurar los títulos de esta manera:

('#ui-dialog-title-ac-popup').text('Add Admin Comments for #' + $ac_userid);

Esa identificación no existe en mi código, pero aparentemente es creada por jquery desde ac-popup y ui-dialog-title. Una especie de error. Pero como dije, eso ya no funciona, y tengo que usar lo siguiente en su lugar:

$('.ui-dialog-title').text('Add Admin Comments for #' + $ac_userid);

Después de hacer eso, el problema del botón faltante parece ser mejor, aunque no estoy seguro de si están definitivamente relacionados.

Jeffrey Simon
fuente
0

Incluso cargando bootstrap después de jquery-ui, pude arreglarlo usando esto:

.ui-dialog-titlebar-close:after {
   content: 'X' !important;
   position: absolute;
   top: -2px;
   right: 3px;
}
idiglove
fuente