jquery UI dialog: como inicializar sem uma barra de título?

254

É possível abrir uma caixa de diálogo jQuery UI sem uma barra de título?

Loony2nz
fonte

Respostas:

289

Eu acho que a melhor solução é usar a opção dialogClass.

Uma extração dos documentos da interface do usuário do jquery:

durante o init: $('.selector').dialog({ dialogClass: 'noTitleStuff' });

ou se você quiser depois do init. :

$('.selector').dialog('option', 'dialogClass', 'noTitleStuff');

Então, eu criei algum diálogo com a opção dialogClass = 'noTitleStuff' e o css assim:

.noTitleStuff .ui-dialog-titlebar {display:none}

tão simples !! mas levei 1 dia para pensar por que meu método de perfuração id-> anterior não estava funcionando. De fato, quando você chama o .dialog()método div, você transforma-se filho de outro div (o verdadeiro diálogo div) e, possivelmente, um 'irmão' do titlebardiv, por isso é muito difícil tentar encontrar o último a partir do primeiro.

esquisito
fonte
2
+1 A solução de Jonatan não funciona em diálogos específicos. O seu faz.
cetnar 8/09/10
1
Eu concordo com o mizar. Essa é a melhor solução, pois ela permite que você seja específico para as caixas de diálogo que possuem apenas a classe que você definiu.
Carlos Pinto
2
a única desvantagem desse método é que o Chrome adiciona uma barra de rolagem vertical para essa caixa de diálogo quando configurada como modal, porque de alguma forma o jQuery começa a calcular incorretamente a altura da sobreposição da interface do usuário da interface do usuário ... eu não me aprofundava mais, e não encontra uma solução rápida para além do hacky {overflow: hidden} #
dimsuz
1
dialogClass foi descontinuado no jquery v 1.12 e não afeta o objeto de diálogo conforme pretendido.
Mini Fridge
1
A opção dialogClass foi descontinuada em favor da opção de classes, usando a propriedade ui-dialog.
Sandeep Saroha
96

Eu descobri uma correção para remover dinamicamente a barra de título.

$("#example").dialog(dialogOpts);
// remove the title bar
$(".ui-dialog-titlebar").hide();

Isso removerá todos os elementos com a classe 'ui-dialog-titlebar' após a renderização da caixa de diálogo.

Loony2nz
fonte
3
... e a opção css remove qualquer chance deles aparecerem antes. Não tenho certeza se vejo algum benefício em sua alternativa. Na realidade, sua alternativa fará o que fiz, adicionando apenas uma etapa extra. Seguir a rota CSS será mais rápido.
Sampson
10
Bem, minha opção removerá apenas a barra de título dessa caixa de diálogo. Se eu usasse sua opção, removeria a barra de título de todas as minhas caixas de diálogo. Eu posso ver no futuro que vou precisar de uma barra de título.
21710 Loony2nz
2
Então você incluir o seu elemento dentro do css-regra: #example .ui-dialog-titlebar.... Funcionará de qualquer maneira; mas o Javascript definirá o CSS eventualmente, então não vejo o benefício de não fazê-lo no CSS, para começar. Ele realmente não faz muita diferença - o que você está mais confortável com :)
Sampson
2
Sou eu ou o #example não tem escopo sobre o título da caixa de diálogo?
Rio
2
@ Cookies de Farinha de Arroz: O .hide () deve vir depois de .dialog () porque .dialog () é o que injeta a marcação da caixa de diálogo na página. Antes dessa chamada, a página ainda não possui elementos de diálogo.
Jeremy Wiebe
62

Eu acredito que você pode ocultá-lo com CSS:

.ui-dialog-titlebar {
    display: none;
}

Como alternativa, você pode aplicar isso a diálogos específicos com a dialogClassopção:

$( "#createUserDialog" ).dialog({
    dialogClass: "no-titlebar"
});
.no-titlebar .ui-dialog-titlebar {
    display: none;
}

Confira " Theming " na caixa de diálogo. A sugestão acima utiliza a dialogClassopção, que parece estar saindo em favor de um novo método.

Sampson
fonte
Sim, acho que funcionaria, mas é uma opção global. Fiquei me perguntando se havia uma maneira de fazê-lo com opções. Eu acho que posso fazer alguma pré-renderização jquery'ness para remover o título div antes que seja mostrado.
21710 Loony2nz
2
Não. Não acredito que haja uma opção para removê-lo. Por padrão, é o botão fechar, então, em certo sentido, é quase um design ruim.
Sampson
3
Quando as pessoas falam sobre css muito, eles ortográfica engraçado, não é mesmo
bobobobo
Além disso, você provavelmente não deve removê-lo, pois não poderá mais mover a caixa de diálogo depois disso. Provavelmente melhor para colocar nenhum texto nele e remodelar-lo por isso é escura e fina
bobobobo
Se você tiver algum outro evento que aciona o método de fechamento da caixa de diálogo, pode haver casos em que você não precisa do botão Fechar na barra de título.
Carlos Pinto
55

Eu uso isso em meus projetos

$("#myDialog").dialog(dialogOpts);
// remove the title bar
$("#myDialog").siblings('div.ui-dialog-titlebar').remove();
// one liner
$("#myDialog").dialog(dialogOpts).siblings('.ui-dialog-titlebar').remove();
Amirouche Douda
fonte
7
Ainda melhor: remova a barra de título, mas não o botão Fechar. Mantenha sua funcionalidade. $(document).ready(function() { $('#video').click(function(){ $( "#dialog" ).dialog().siblings('.ui-dialog-titlebar').removeClass('ui-widget-header'); }); });
Adrian P.
$("#myDialog").dialog('open').siblings('.ui-dialog-titlebar').remove();é a melhor resposta na minha opinião +1 para esta linha de código
Jaylen
Ou você pode procurar o irmão anterior, que é a barra de título: .ui-dialog-titlebar: $("#myDialog").prev().hide()ou $("#myDialog").prev(".ui-dialog-titlebar").hide().
Andrew
Voto positivo porque tenho dois divs e queria ocultar apenas um.
Marcus Becker
15

Isso funcionou para mim:

$("#dialog").dialog({
    create: function (event, ui) {
        $(".ui-widget-header").hide();
    },
Koder
fonte
1
Isso ocultará os cabeçalhos em todas as caixas de diálogo. Minha sugestão abaixo (próxima resposta) fará isso apenas na caixa de diálogo que está sendo aberta no momento.
ingredient_15939
Bom ... Isso significa que não preciso ocultar todas as caixas de diálogo por causa da classe base css ... também significa que não preciso configurar minha caixa de diálogo separadamente e remover o título.
Gwasshoppa 08/08/19
8

Tente usar

$("#mydialog").closest(".ui-dialog-titlebar").hide();

Isso ocultará todos os títulos das caixas de diálogo

$(".ui-dialog-titlebar").hide();
Firas Abd Alrahman
fonte
7

Na verdade, existe ainda outra maneira de fazer isso, usando o diálogo widgetdiretamente:

Você pode obter o Dialog Widget assim

$("#example").dialog(dialogOpts);
$dlgWidget = $('#example').dialog('widget');

e então faça

$dlgWidget.find(".ui-dialog-titlebar").hide();

para ocultar titlebarapenas dentro desse diálogo

e em uma única linha de código (eu gosto de encadeamento):

$('#example').dialog('widget').find(".ui-dialog-titlebar").hide();

Não é necessário adicionar uma classe extra à caixa de diálogo dessa maneira, basta ir diretamente a ela. Workss bem para mim.

odedbd
fonte
5

Acho mais eficiente e mais legível usar o evento open e ocultar a barra de título a partir daí. Não gosto de usar pesquisas de nome de classe de página global.

open: function() { $(this).closest(".ui-dialog").find(".ui-dialog-titlebar:first").hide(); }

Simples.

ingrediente_15939
fonte
2
Este é o método que eu segui, mas usei a função create: para que ela fique sempre oculta, não apenas quando a caixa de diálogo é exibida. Também mudei para .remove () em vez de .hide () para garantir que ele saiu completamente da caixa de diálogo.
Chris Porter
4

Você pode usar o jquery para ocultar a barra de título após usar o dialogClass ao inicializar o diálogo.

durante o init:

$('.selector').dialog({
    dialogClass: 'yourclassname'
});

$('.yourclassname div.ui-dialog-titlebar').hide();

Usando esse método, você não precisa alterar seu arquivo css, e isso também é dinâmico.

Arun Vasudevan Nair
fonte
1
Sim, essa foi a solução da mizar - postada 6 meses antes da sua.
22911 Kirk Woll
Concordo, mas você também precisará adicionar uma entrada CSS, o que complica a solução. Minha sugestão resolve o problema usando apenas jQuery.
Arun Vasudevan Nair
4

Eu gosto de substituir os widgets jQuery.

(function ($) {
    $.widget("sauti.dialog", $.ui.dialog, {
        options: {
            headerVisible: false
        },
        _create: function () {
            // ready to generate button
            this._super("_create"); // for 18 would be $.Widget.prototype._create.call(this);
            // decide if header is visible
            if(this.options.headerVisible == false)
                this.uiDialogTitlebar.hide();
        },
        _setOption: function (key, value) {
            this._super(key, value); // for 1.8 would be $.Widget.prototype._setOption.apply( this, arguments );
            if (key === "headerVisible") {
                if (key == false)
                    this.uiDialogTitlebar.hide();
                else
                    this.uiDialogTitlebar.show();
                return;
            }
        }
    });
})(jQuery);

Agora você pode configurar se deseja mostrar a barra de título ou não

   $('#mydialog').dialog({
      headerVisible: false // or true
});
Andrej Kaurin
fonte
4

Se você tiver várias caixas de diálogo, poderá usar o seguinte:

$("#the_dialog").dialog({
        open: function(event, ui) { 
            //hide titlebar.
            $(this).parent().children('.ui-dialog-titlebar').hide();
        }
    });
m4dd
fonte
3

Essa é a maneira mais fácil de fazer isso e ela removerá apenas a barra de título nessa caixa de diálogo específica;

$('.dialog_selector').find('.ui-dialog-titlebar').hide();
pdubbb1
fonte
2

A única coisa que descobri ao ocultar a barra de título do Dialog é que, mesmo que a exibição seja nenhuma, os leitores de tela ainda a capturam e a leem. Se você já adicionou sua própria barra de título, ela lerá ambas, causando confusão.

O que fiz foi removido do DOM usando $(selector).remove(). Agora, os leitores de tela (e todos os outros) não o verão porque não existe mais.

user616258
fonte
2

Tente isto

$("#ui-dialog-title-divid").parent().hide();

substituir dividpor correspondenteid

abdulkaderjeelani
fonte
2

Este próximo formulário me corrigiu o problema.

$('#btnShow').click(function() {
  $("#basicModal").dialog({
    modal: true,
    height: 300,
    width: 400,
    create: function() {
      $(".ui-dialog").find(".ui-dialog-titlebar").css({
        'background-image': 'none',
        'background-color': 'white',
        'border': 'none'
      });
    }
  });
});
#basicModal {
  display: none;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
<div id="basicModal">
  Here your HTML content
</div>
<button id="btnShow">Show me!</button>

jcromeros1987
fonte
1

Isso funcionou para eu ocultar a barra de título da caixa de diálogo:

$(".ui-dialog-titlebar" ).css("display", "none" );
user1712742
fonte
1

É assim que isso pode ser feito.

Vá para a pasta de temas -> base -> abra jquery.ui.dialog.css

Encontrar

Seguimentos

se você não quiser exibir titleBar, simplesmente defina display: none como eu fiz a seguir.

.ui dialog.ui-dialog .ui-dialog-titlebar 
{
    padding: .4em 1em;
    position: relative;
        display:none;
}

Da mesma forma para o título também.

.ui-dialog .ui-dialog-title {
    float: left;
    margin: .1em 0;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    display:none; 
}

Agora vem o botão Fechar, você também pode definir nenhum ou definir seu

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: .3em;
    top: 50%;
    width: 21px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px;

   display:none;

}

Fiz muita pesquisa, mas nada depois tive essa ideia em mente. No entanto, isso afetará todo o aplicativo para não ter botão de fechar, barra de título para a caixa de diálogo, mas você também pode superar isso usando jquery e adicionando e configurando css via jquery

aqui está a sintaxe para isso

$(".specificclass").css({display:normal})
ProgrammingNinja
fonte
1
Isso funciona e é útil entender que isso pode ser feito, mas se você tiver várias .dialogs()e apenas 1 ou mais dessas configurações, existem rotas alternativas do que aplicar globalmente as configurações dessa maneira.
Chef_Code 3/17/17
0

Para mim, eu ainda queria usar os cantos redimensionáveis, só não queria ver as linhas diagonais. eu usei

$(".ui-resizable-handle").css("opacity","0");

Acabei de perceber que estava comentando a pergunta errada. Fazendo jus ao meu xará :(

controlZ
fonte
0

Você já tentou a solução dos documentos da jQuery UI? https://api.jqueryui.com/dialog/#method-open

Como se costuma dizer, você pode fazer assim ...

Em CSS:

.no-titlebar .ui-dialog-titlebar {
  display: none;
}

Em JS:

$( "#dialog" ).dialog({
  dialogClass: "no-titlebar"
});
Олег Всильдеревьев
fonte
-1

Você pode remover a barra com o ícone fechar com as técnicas descritas acima e, em seguida, adicionar um ícone fechar.

CSS:

.CloseButton {
background: url('../icons/close-button.png');   
width:15px;
height:15px;
border: 0px solid white;
top:0;
right:0;
position:absolute;
cursor: pointer;
z-index:999;
}

HTML:

var closeDiv = document.createElement("div");
closeDiv.className = "CloseButton";

// anexa esta div à div que contém seu conteúdo

JS:

 $(closeDiv).click(function () {
         $("yourDialogContent").dialog('close');
     });
Jacob
fonte
-1

vá para o seu jquery-ui.js (no meu caso, jquery-ui-1.10.3.custom.js) e procure por this._createTitlebar (); e comente.

agora qualquer um dos seus diálogos aparecerá com cabeçalhos. Se você deseja personalizar o cabeçalho, vá para _createTitlebar (); e edite o código dentro.

de

user2575051
fonte
Fazer modificações como essa causa uma terrível dor de atualização.
usr