@MikeCole A documentação é para 1.10 - acho que se você deseja ocultar o botão Fechar em qualquer versão inferior, precisará fazer algo como as respostas abaixo.
Jarrett
1
Use "ui-dialog-titlebar-close": "display: none;" quando configuramos a caixa de diálogo modal
jqueryui
Respostas:
711
Descobri que isso funcionou no final (observe a terceira linha substituindo a função aberta que encontra o botão e oculta):
$(".ui-dialog-titlebar-close", ui).hide();para ocultar o botão apenas para esta caixa de diálogo.
Anthony Serdyukov
67
Também não consegui fazê-lo funcionar a partir do parâmetro ui. Acabei usando: $ (".ii-dialog-titlebar-close", $ (this) .parent ()). Hide ();
Nigel
70
@ Anton Só quero ressaltar que apenas especificar 'ui' não funciona. você tem que usar 'ui.dialog'. então a linha correta seria $ (". ui-dialog-titlebar-close", ui.dialog) .hide ();
Bradley Mountford
22
@Bradley. O ui não funcionou para mim, o ui.dialog funcionou, mas se aplicava a cada instância. Para que o trabalho não se aplique apenas àquele em que a função open é definida, eu precisava fazer isso: $ (".ii-dialog-titlebar-close", this.parentNode) .hide ();
Eu gosto dessa abordagem porque posso usá-la juntamente com coisas como: .noTitleDlg .ui-dialog-titlebar {display: none} em CSS para criar a maneira que eu quero que minha caixa de diálogo apareça e se comporte e, em seguida, apenas defina a caixa de diálogo de acordo.
A. Murray
11
solução muito limpa ... +1 por não envolver a funcionalidade js adicional para remover o botão.
Bongs
2
Boa ideia. É útil direcionar um diálogo específico em situações em que você usa o mesmo método aberto para todos os diálogos, e não é muito prático alterá-lo para uma instância específica.
ZolaKt 13/09/12
3
Minha solução favorita. Eu estava pensando que algo assim seria a melhor abordagem. Obrigado por já o ter codificado aqui. Com base nisso, eu gosto de usar essa variação, que utilizará o atributo class da div de conteúdo do diálogo, na qual eu posso colocar a classe "no-close":dialogClass : $("#my-dialog-id").attr("class"),
LS
Esta solução permite fechar com escape, se você deseja impedir o fechamento com o uso de escape:$( ".selector" ).dialog({ dialogClass: 'no-close' , closeOnEscape: false,});
Mladen Adamovic
124
a resposta "melhor" não será boa para várias caixas de diálogo. aqui está uma solução melhor.
open:function(event, ui){//hide close button.
$(this).parent().children().children('.ui-dialog-titlebar-close').hide();},
Isso é mais complicado do que você precisa. $(".ui-dialog-titlebar-close", $(this).parent()).hide();
precisa saber é o seguinte
@KevinPanko, sua sugestão funciona bem ao usar o exemplo fornecido pelo site de demonstração jquery ui com o ASP.NET v2.0 em uma página .aspx. jqueryui.com/demos/dialog/modal-form.html
Matthew Dally
6
.closest ('.ii-dialog') é melhor do que assumir um pai.
technomage
86
Você pode usar CSS para ocultar o botão Fechar em vez de JavaScript:
.ui-dialog-titlebar-close{
display: none;}
Se você não quiser afetar todos os modais, poderá usar uma regra como
O problema é que ocasionalmente oculta o botão Fechar para outros diálogos também. como evitar isso.
Zaveed Abbasi
Mesmo usando open: function (evento, ui) {$ (this) .closest ('. Ui-dialog'). Find ('. Ui-dialog-titlebar-close'). Show (); } não funciona.
Zaveed Abbasi
34
Depois de chamar .dialog()um elemento, você pode localizar o botão Fechar (e outras marcações da caixa de diálogo) a qualquer momento conveniente sem usar manipuladores de eventos:
$("#div2").dialog({// call .dialog method to create the dialog markup
autoOpen:false});
$("#div2").dialog("widget")// get the dialog widget element.find(".ui-dialog-titlebar-close")// find the close button for this dialog.hide();// hide it
Método alternativo:
Os manipuladores de eventos de diálogo internos thisreferem-se ao elemento "dialogado" e $(this).parent()referem-se ao contêiner de marcação de diálogo, portanto:
$("#div3").dialog({
open:function(){// open event handler
$(this)// the element being dialogged.parent()// get the dialog widget element.find(".ui-dialog-titlebar-close")// find the close button for this dialog.hide();// hide it}});
Para sua informação, a marcação da caixa de diálogo é assim:
<divclass="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable"><!-- ^--- this is the dialog widget --><divclass="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><spanclass="ui-dialog-title"id="ui-dialog-title-dialog">Dialog title</span><aclass="ui-dialog-titlebar-close ui-corner-all"href="#"><spanclass="ui-icon ui-icon-closethick">close</span></a></div><divid="div2"style="height:200px;min-height:200px;width: auto;"class="ui-dialog-content ui-widget-content"><!-- ^--- this is the element upon which .dialog() was called --></div></div>
Nenhuma das opções acima funciona. A solução que realmente funciona é:
$(function(){//this is your dialog:
$('#mydiv').dialog({// Step 1. Add an extra class to our dialog to address the dialog directly. Make sure that this class is not used anywhere else:
dialogClass:'my-extra-class'})// Step 2. Hide the close 'X' button on the dialog that you marked with your extra class
$('.my-extra-class').find('.ui-dialog-titlebar-close').css('display','none');// Step 3. Enjoy your dialog without the 'X' link})
$('#yourdiv').// Get your box ...
dialog().// ... and turn it into dialog (autoOpen: false also works)
prev('.ui-dialog-titlebar').// Get title bar,...
find('a').// ... then get the X close button ...
hide();// ... and hide it
O botão fechar adicionado pelo widget Dialog possui a classe 'ui-dialog-titlebar-close', portanto, após sua chamada inicial para .dialog (), você pode usar uma declaração como esta para remover o botão fechar novamente: Funciona ..
Você poderá usar CSS direto aqui em vez de JS se estiver apenas ocultando o ícone. Tudo o que .hide()faz é definido display:noneem CSS, portanto $(".ui-button-icon-only").hide();é funcionalmente equivalente a .ui-button-icon-only { display: none; }.
Desde que descobri que estava fazendo isso em vários lugares do meu aplicativo, envolvi-o em um plugin:
(function($){
$.fn.dialogNoClose =function(){returnthis.each(function(){// hide the close button and prevent ESC key from closing
$(this).closest(".ui-dialog").find(".ui-dialog-titlebar-close").hide();
$(this).dialog("option","closeOnEscape",false);});};})(jQuery)
Exemplo de uso:
$("#dialog").dialog({/* lots of options */}).dialogNoClose();
Você pode remover o botão Fechar com o código abaixo. Também existem outras opções que podem ser úteis.
$('#dialog-modal').dialog({//To hide the Close 'X' button"closeX":false,//To disable closing the pop up on escape"closeOnEscape":false,//To allow background scrolling"allowScrolling":true})//To remove the whole title bar.siblings('.ui-dialog-titlebar').remove();
Respostas:
Descobri que isso funcionou no final (observe a terceira linha substituindo a função aberta que encontra o botão e oculta):
Para ocultar o botão Fechar em todas as caixas de diálogo, você também pode usar o seguinte CSS:
fonte
$(".ui-dialog-titlebar-close", ui).hide();
para ocultar o botão apenas para esta caixa de diálogo.open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }
Aqui está outra opção apenas usando CSS que não passa por todas as caixas de diálogo da página.
O CSS
O HTML
O Javascript.
Exemplo de trabalho
fonte
dialogClass : $("#my-dialog-id").attr("class"),
$( ".selector" ).dialog({ dialogClass: 'no-close' , closeOnEscape: false,});
a resposta "melhor" não será boa para várias caixas de diálogo. aqui está uma solução melhor.
fonte
$(".ui-dialog-titlebar-close", $(this).parent()).hide();
Você pode usar CSS para ocultar o botão Fechar em vez de JavaScript:
Se você não quiser afetar todos os modais, poderá usar uma regra como
E aplique
.hide-close-btn
no nó superior da caixa de diálogofonte
Conforme mostrado na página oficial e sugerido por David:
Crie um estilo:
Em seguida, você pode simplesmente adicionar a classe no-close a qualquer caixa de diálogo para ocultar o botão Fechar:
fonte
Eu acho que isso é melhor.
fonte
Depois de chamar
.dialog()
um elemento, você pode localizar o botão Fechar (e outras marcações da caixa de diálogo) a qualquer momento conveniente sem usar manipuladores de eventos:Método alternativo:
Os manipuladores de eventos de diálogo internos
this
referem-se ao elemento "dialogado" e$(this).parent()
referem-se ao contêiner de marcação de diálogo, portanto:Para sua informação, a marcação da caixa de diálogo é assim:
Demonstrações aqui
fonte
A resposta de Robert MacLean não funcionou para mim.
No entanto, isso funciona para mim:
fonte
fonte
Nenhuma das opções acima funciona. A solução que realmente funciona é:
Por favor, verifique se funciona para você.
fonte
A melhor maneira de ocultar o botão é filtrá-lo com o atributo data-icon:
fonte
http://jsfiddle.net/marcosfromero/aWyNn/
fonte
Para desativar a classe, o código de acesso:
pode ser usado.
fonte
O botão fechar adicionado pelo widget Dialog possui a classe 'ui-dialog-titlebar-close', portanto, após sua chamada inicial para .dialog (), você pode usar uma declaração como esta para remover o botão fechar novamente: Funciona ..
fonte
Eu pego o evento close da caixa de diálogo. Esse código remove o
<div>
(#dhx_combo_list
):fonte
fonte
.hide()
faz é definidodisplay:none
em CSS, portanto$(".ui-button-icon-only").hide();
é funcionalmente equivalente a.ui-button-icon-only { display: none; }
.Você também pode remover sua linha de cabeçalho:
<div data-role="header">...</div>
que remove o botão Fechar.
fonte
fonte
Maneira fácil de conseguir: (Faça isso no seu
Javascript
)fonte
Desde que descobri que estava fazendo isso em vários lugares do meu aplicativo, envolvi-o em um plugin:
Exemplo de uso:
fonte
Eu sou fã de one-liners (onde eles trabalham!). Aqui está o que funciona para mim:
fonte
Que tal usar essa linha CSS pura? Acho essa a solução mais limpa para um diálogo com o ID fornecido:
fonte
Você pode remover o botão Fechar com o código abaixo. Também existem outras opções que podem ser úteis.
fonte