javascript - example - jquery modal show

Diálogo jQuery UI-icono de falta de cierre

Question

Estoy usando un tema personalizado jQuery 1.10.3. Descargué cada escalera 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 ícono de cerrar:

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 Dialog Demo :

<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, así que no puedo agregar las etiquetas span sin editar el archivo jqueryui js, que parece una opción incorrecta / innecesaria para lograr una 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.

Answer 1

Como referencia, así es como amplié 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();
 }
});

Answer 2

Encontré tres soluciones:

1. Solo puedes cargar bootsrap primero. Y ellos cargan jquery-ui. Pero no es buena idea. Porque verá 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 bootsrap y también quiero tener el botón de cerrar con un ícono. He hecho lo siguiente:

   ¿Qué aspecto tiene el botón de cerrar 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;
   }

Answer 3

Este es un comentario en la respuesta principal, pero sentí que valió la pena su propia respuesta porque me ayudó a responder el problema.

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

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

Answer 4

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

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

Answer 5

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 de cerrar el diálogo. Solo está la etiqueta del botón, el ícono del ícono del span es missong.

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

Answer 6

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

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

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

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

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

Pero después de seguir trabajando, descubrí que en algunos casos los títulos no se ajustaban correctamente, y después de arreglar eso, el botón de cerrar X reapareció como debería ser.

Solía ​​configurar los títulos como este:

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

Esa identificación no existe en mi código, pero se crea aparentemente por jquery desde ac-popup y ui-dialog-title. Tipo de kludge Pero como dije, 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 que falta parece ser mejor, aunque no estoy seguro de si están definitivamente relacionados.

Answer 7

Estoy usando jQuery UI 1.8.17 y tuve este mismo problema, además tenía hojas de estilo CSS adicionales que se aplicaban a las cosas en la página, incluido el color de la barra de título. Para evitar cualquier otro problema, apunté a los elementos exactos de la interfaz de usuario utilizando 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 cerrar en las propiedades del diálogo mismo: ...

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!

Answer 8

Llego tarde a esto por un tiempo, pero voy a volverte loco, ¿listo?

La razón por la que esto está sucediendo es porque está llamando al arranque, después de que está llamando 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 el interés meses después, así que pensé que valía la pena editarlo. De hecho, me gusta mucho la solución noConflict que se ofrece en el comentario debajo de esta respuesta y que el usuario Pretty Cool clarificó por separado. Como algunos han informado de problemas con la información sobre herramientas de arranque 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 la necesitaba porque arrancaba. Entonces este problema nunca se me ocurrió.

Editar - 22/07/2015 - ¡No confundas jquery-ui con jquery ! Si bien el JavaScript de Bootstrap requiere que jQuery se cargue antes, no depende de jQuery-UI. Por lo tanto, jquery-ui.js se puede cargar después de bootstrap.min.js , mientras que jquery.js siempre se debe cargar antes de Bootstrap.

Answer 9

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

aquí está el CSS:

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

Answer 10

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 Images en el mismo lugar donde 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 lo hago, estoy cambiando la ubicación de jquery-ui.min.css . El código CSS para el diálogo espera una carpeta llamada Images en el mismo directorio y dentro de esta carpeta espera íconos predeterminados. dado que Gulp no estaba copiando las imágenes en el nuevo destino, no mostraba el icono x.

Answer 11

Si llama al cuadro de 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>

Answer 12

Simplemente agregue el desaparecido:

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

Answer 13

Tuve el mismo problema exacto, Tal vez ya lo compruebe, pero lo resolvió simplemente colocando la carpeta "images" en la misma ubicación que el jquery-ui.css

Answer 14

Un hombre sabio una vez me ayudó.

En la carpeta .../css donde se encuentra el archivo jquery-ui.css , cree una carpeta de "imágenes" y jquery-ui.css en los archivos:

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.

Answer 15

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

}