Diálogo da UI do jQuery - ícone fechar ausente

Estou usando um tema personalizado do jQuery 1.10.3. Eu baixei todas as músicas diretamente do rolo de temas e intencionalmente não mudei nada.

Crio uma caixa de diálogo e recebo um quadrado cinza vazio onde o ícone fechar deve estar:

Comparei o código gerado na minha 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>

para o código gerado na página Demo da caixa 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>

EDIT: As diferentes partes do código são geradas pelo jQueryUI, não eu, então não posso adicionar as tags span sem editar o arquivo jqueryui js, que parece ser uma opção ruim / desnecessária para obter a funcionalidade normal.

Aqui está o javascript usado que gera essa parte do 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);
        }
    }
});

Estou perdida e preciso de ajuda. Desde já, obrigado.

Estou atrasado para isso daqui a pouco, mas vou explodir sua mente, pronto?

A razão pela qual isso está acontecendo é porque você está chamando o bootstrap, depois de chamar o jquery-ui.

Literalmente, troque os dois para que, em vez de:

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

se torna

<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 - isso continua atraindo interesse meses depois, então eu pensei que valia a pena editar. Eu realmente gosto da solução noConflict oferecida no comentário abaixo desta resposta e esclarecida pelo usuário Pretty Cool como uma resposta separada. Como alguns relataram problemas com a dica de ferramenta de autoinicialização quando os scripts são trocados. No entanto, não tive esse problema porque baixei a interface do usuário do jquery sem a dica de ferramenta, pois não era necessário porque o bootstrap. Portanto, esse problema nunca surgiu para mim.

Editar - 22/07/2015 - Não confunda jquery-uicom jquery! Enquanto o JavaScript do Bootstrap exige que o jQuery seja carregado antes, ele não depende da jQuery-UI. Portanto, jquery-ui.jspode ser carregado depois bootstrap.min.js, enquanto jquery.jssempre precisa ser carregado antes do Bootstrap.

Este é um comentário sobre a resposta principal, mas achei que valeu a sua própria resposta, porque me ajudou a responder o problema.

Se você deseja manter o Bootstrap declarado após a interface do usuário do JQuery (fiz isso porque queria usar a dica de ferramenta do Bootstrap), declarar o seguinte (declarei depois $(document).ready) permitirá que o botão apareça novamente (resposta em 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

Parece ser um bug na maneira como o jQuery é enviado. Você pode corrigi-lo manualmente com alguma manipulação de dom no 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>");
    }
});

Isso é relatado como quebrado na versão 1.10

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

phillip em 29 de janeiro de 2013 às 07:36 disse: Nas versões CDN, o botão de diálogo está ausente. Existe apenas a tag button, o ícone da interface do usuário da extensão está errado.

Fiz o download da versão anterior e o X do botão Fechar aparece novamente.

Encontrei três correções:

1. Você pode simplesmente carregar o bootsrap primeiro. E eles carregam jquery-ui. Mas não é uma boa ideia. Porque você verá erros no console.

2. Este:

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

   ajuda. Mas outros botões parecem terríveis. E agora não temos botões de inicialização.

3. Eu só quero usar estilos de botas e também quero ter o botão Fechar com um ícone. Eu fiz o seguinte:

   Como o botão Fechar cuida da correção

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

Eu tive o mesmo problema, talvez você já tenha verificado isso, mas resolvido colocando a pasta "images" no mesmo local que o jquery-ui.css

Fiquei preso com o mesmo problema e, depois de ler e tentar todas as sugestões acima, tentei substituir manualmente esta imagem (que você pode encontrar aqui ) no CSS depois de baixá-la e salva na pasta de imagens do meu aplicativo e pronto, problema resolvido!

aqui está o CSS:

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

Estou usando o jQuery UI 1.8.17 e tive o mesmo problema, além de aplicar folhas de estilo css adicionais às coisas da página, incluindo a cor da barra de título. Portanto, para evitar outros problemas, direcionei os elementos exatos da interface do usuário usando o código abaixo:

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

Em seguida, adicionei um botão Fechar nas propriedades da própria caixa de diálogo: ...

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

Por alguma razão, tive que segmentar os dois itens, mas funciona!

Eu sei que essa pergunta é antiga, mas eu só tive esse problema com o jquery-ui v1.12.0.

Resposta curta Verifique se você tem uma pasta chamada Imagesno mesmo local que você jquery-ui.min.css. A pasta images deve conter as imagens encontradas com um novo download do arquivo jquery-ui

Resposta longa

Meu problema é que estou usando o gulp para mesclar todos os meus arquivos css em um único arquivo. Quando faço isso, estou alterando a localização do jquery-ui.min.css. O código css da caixa de diálogo espera uma pasta chamada Imagesno mesmo diretório e dentro desta pasta espera ícones padrão. como o gulp não estava copiando as imagens para o novo destino, não estava mostrando o ícone x.

Como referência, é assim que estendi o método aberto conforme a sugestão 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;

}

Se você estiver chamando a caixa de diálogo () dentro da função js, ​​poderá usar os códigos de conflito dos botões de inicialização abaixo

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

Um homem sábio uma vez me ajudou.

Na pasta em que jquery-ui.cssestá localizada, crie uma pasta chamada "images" e copie os arquivos abaixo para ela:

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

e o ícone fechar aparece.

Basta adicionar o que está faltando:

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

Eu tambem tenho esse problema. Aqui está o código que está sendo inserido para o botão Fechar:

Quando desligo o botão style = "display: none:", o botão Fechar aparece. Então, por algum motivo, isso mostra: nenhum; está sendo definido, e eu não vejo como controlar isso. Portanto, outra maneira de resolver isso pode ser simplesmente substituir a tela: nenhuma. Não veja como fazer isso.

Observo que a resposta postada pelo KyleMit funciona, mas cria um botão X com aparência diferente.

Observe também que esse problema não afeta todas as caixas de diálogo nas minhas páginas, mas apenas algumas delas. Algumas caixas de diálogo funcionam como esperado; outros não têm título (ou seja, o espaço que contém o título está vazio) enquanto o botão Fechar estiver presente.

Estou pensando que algo está seriamente errado e talvez não seja o momento para 1.10.x.

Mas, depois de mais trabalho, descobri que, em alguns casos, os títulos não estavam sendo definidos corretamente e, depois de corrigi-lo, o botão Fechar X reapareceu como deveria.

Eu costumava definir os títulos assim:

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

Esse id não existe no meu código, mas é aparentemente criado pelo jquery do ac-popup e do ui-dialog-title. Uma espécie de kludge. Mas, como eu disse, não funciona mais, e tenho que usar o seguinte:

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

Depois disso, o problema do botão ausente parece ser melhor, embora eu não tenha certeza se eles estão definitivamente relacionados.

Mesmo carregando o bootstrap após o jquery-ui, eu consegui corrigir usando isso:

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