dialogo - El cuadro de diálogo modal jQueryUI no muestra el botón de cerrar(x)

jquery dialog close button

Question

Estoy usando un diálogo modal jQuery en mi aplicación ASP .NET MVC 3. Funciona bien, excepto que no hay un botón de cierre en la esquina superior derecha. ¿Cómo puedo agregar esto?

$("#dialog-modal").dialog({
            modal: true,
            autoOpen: false,
            buttons: {
                Ok: function () {
                    $(this).dialog("close");
                }
            }
        });

Answer 1

Aquí hay una gran respuesta https://.com/a/31045175/3778527 Estoy probado con:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/blitzer/jquery-ui.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

Answer 2

Creo que el problema es que el navegador no pudo cargar el sprite de la imagen jQueryUI que contiene el ícono X. Utilice Fiddler, Firebug u otro que le permita acceder a las solicitudes HTTP que el navegador realiza en el servidor y verifique que el sprite de la imagen se haya cargado correctamente.

Answer 3

Debe agregar comillas alrededor del "ok". Ese es el texto del botón. Tal como está, el texto del botón está actualmente vacío (y, por lo tanto, no se muestra) porque está tratando de resolver el valor de esa variable.

Los diálogos modales no deben cerrarse de ninguna otra manera que no sea presionar los botones [OK] o [CANCELAR]. Si desea la [x] en la esquina derecha, configure modal: false o simplemente elimínela por completo.

Answer 4

En la esquina superior derecha del cuadro de diálogo, coloque el mouse sobre el lugar donde debería estar el botón, y vea más bien o no que obtiene algún efecto (el botón se desplaza). Intente hacer clic y ver si se cierra. Si se cierra, entonces estás perdiendo tus sprites de imagen que vienen con la descarga de tu paquete.

Answer 5

Otra posibilidad es que tengas la biblioteca de bootstrap. Algunas versiones de bootstrap y jquery-ui tienen un conflicto con el método .button (), y si bootstrap.js se coloca después de jquery-ui.js, el bootstrap .button () anula el botón jquery y el jquery-ui ''X ''la imagen no aparecería entonces.

mira aquí: https://github.com/twbs/bootstrap/issues/6094

Esto funciona (cierre el cuadro visible):

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

Esto causa el problema:

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

Answer 6

Si bien el op no indica explícitamente que están usando jquery ui y bootstrap juntos, un problema idéntico ocurre si lo haces. Puede resolver el problema cargando bootstrap (js) antes de jquery ui (js). Sin embargo, eso causará problemas con los colores de estado del botón.

La solución final es usar bootstrap o jquery ui, pero no ambos. Sin embargo, una solución alternativa es:

    $(''<div>dialog content</div>'').dialog({
        title: ''Title'',
        open: function(){
            var closeBtn = $(''.ui-dialog-titlebar-close'');
            closeBtn.append(''<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">close</span>'');
        }
    });

Answer 7

Simplemente verifique la ruta de la imagen del botón de cierre en su jquery-ui.css:

.ui-icon { 
    width: 16px; 
    height: 16px; 
    background-image: url**(../img/ui-icons_222222_256x240.png)**/*{iconsContent}*/; 
}
.ui-widget-content .ui-icon {
    background-image: url(../img/ui-icons_222222_256x240.png)/*{iconsContent}*/; 
}
.ui-widget-header .ui-icon {
    background-image: url(../img/ui-icons_222222_256x240.png)/*{iconsHeader}*/; 
}
.ui-state-default .ui-icon { 
    background-image: url(images/ui-icons_888888_256x240.png)/*{iconsDefault}*/; 
}
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
    background-image: url(../img/ui-icons_454545_256x240.png)/*{iconsHover}*/; 
}
.ui-state-active .ui-icon {
    background-image: url(../img/ui-icons_454545_256x240.png)/*{iconsActive}*/; 
}

Corrija la ruta de icons_222222_256x240.png y ui-icons_454545_256x240.png

Answer 8

Solo el enlace del CSS funcionó para mí. Puede haber estado ausente de mi proyecto por completo:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

Answer 9

Supongo que hay algún conflicto con otra biblioteca JS en tu código. Intenta forzar mostrando el botón de cerrar:

...
open:function () {
  $(".ui-dialog-titlebar-close").show();
} 
...

Esto funcionó para mí.

Answer 10

Tenía el mismo problema simplemente agregue esta función a las opciones de diálogo abiertas y funcionó sharm

open: function(){
            var closeBtn = $(''.ui-dialog-titlebar-close'');
            closeBtn.append(''<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>'');
        },

y en evento cercano necesitas eliminar eso

close: function () {
            var closeBtn = $(''.ui-dialog-titlebar-close'');
            closeBtn.html('''');}

Ejemplo completo

<div id="deleteDialog" title="Confirm Delete">
 Can you confirm you want to delete this event?
</div> 

$("#deleteDialog").dialog({
                width: 400, height: 200,
                modal: true,
                open: function () {
                    var closeBtn = $(''.ui-dialog-titlebar-close'');
                    closeBtn.append(''<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>'');
                },
                close: function () {
                    var closeBtn = $(''.ui-dialog-titlebar-close'');
                    closeBtn.html('''');
                },
                buttons: {
                    "Confirm": function () {
                        calendar.fullCalendar(''removeEvents'', event._id);
                        $(this).dialog("close");
                    },
                    "Cancel": function () {
                        $(this).dialog("close");
                    }
                }
            });

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

Answer 11

Tuve este problema y pude resolverlo con la declaración a continuación.

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

Answer 12

Tuve un problema similar. Estaba usando jquery y jquery-ui. Cuando actualicé mis versiones, la imagen de diálogo de cierre ya no apareció. Mi problema fue que cuando descomprimí el paquete js que descargué, los directorios no tenían el permiso de ejecución.

Así que un rápido chmod + x dir-name, y también para las subcarpetas, funcionó. Sin el permiso de ejecución en Linux, apache no puede entrar en la carpeta.

Answer 13

Usando el principio de la idea user2620505 obtuvo el resultado con la implementación de addClass:

...
open: function(){
    $(''.ui-dialog-titlebar-close'').addClass(''ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only'');
    $(''.ui-dialog-titlebar-close'').append(''<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">close</span>'');
}, 
...

Si el inglés es malo, perdónenme, estoy usando Google Translate.

Answer 14

una solución puede ser tener el cierre dentro de su modal

echa un vistazo a this simple ejemplo

Answer 15

Solución pura de CSS:

Estaba usando tanto bootstrap como jQuery UI y cambiar el orden de agregar los scripts rompió algunos otros objetos. Terminé usando una solución CSS pura:

.ui-dialog-titlebar-close {
  background: url("http://code.jquery.com/ui/1.10.3/themes/smoothness/images/ui-icons_888888_256x240.png") repeat scroll -93px -128px rgba(0, 0, 0, 0);
  border: medium none;
}
.ui-dialog-titlebar-close:hover {
  background: url("http://code.jquery.com/ui/1.10.3/themes/smoothness/images/ui-icons_222222_256x240.png") repeat scroll -93px -128px rgba(0, 0, 0, 0);
}