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

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

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.

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.

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.

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

Isso funcionou para mim:

$("#dialog").dialog({
    create: function (event, ui) {
        $(".ui-widget-header").hide();
    },

Tente usar

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

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

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

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.

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.

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.

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

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

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

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.

Tente isto

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

substituir dividpor correspondenteid

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>

Eu acho que a maneira mais limpa de fazer isso seria criar um novo widget myDialog, consistindo no widget de diálogo menos o código de barras do título. A exclusão do código de barras do título parece direta.

https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js

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

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

É 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})

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á :(

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

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

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