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

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:

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.

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.

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

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>");
    }
});

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.

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;
   }

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

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");
}

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!

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.

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();
	}
});

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

}

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>

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.

Simplemente agregue lo que falta:

<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">close</span>

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

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.

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;
}