Hoje vou deixar três dicas aqui que consumiram algumas horas preciosas da minha vida e pode te poupar outras.

  • Remover o botão fechar do JQuery Dialog;
  • Alterar o texto do botão [x] do JQuery Dialog;
  • Alterar o tooltip do botão [x] do JQuery Dialog, que por padrão é “close”;

Remover o botão

$("#dialog-message").dialog({
    open: function(event, ui) {
        $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar-close").remove();
    }
});

Alterar o texto do botão [x]

$("#dialog-message").dialog({
    open: function(event, ui) {  
        $('.ui-dialog-titlebar-close').html('<span>Sair</span>');
    }
});

Ou ainda removendo o CSS

$("#dialog-message").dialog({
    open: function(event, ui) {  
        $('.ui-dialog-titlebar-close').removeClass("ui-dialog-titlebar-close").html('<span>Sair</span>');
    }
});

Alterar o tooltip do botão [x] do JQuery Dialog, que por padrão é “close”

Aqui existem duas formas, a mais simples e oficial

$("#dialog-message").dialog({	
    closeText : 'Clique aqui para sair'
});

E aqui uma solução alternativa que já tive que usar uma vez por causa de um IE que não estava aceitando a primeira solução

$("#dialog-message").dialog({
    open: function(event, ui) {  
        $('.ui-dialog-titlebar-close').attr("title", "Clique aqui para fechar");  
    }
});

Curiosidades

Caso você deseje conhecer o HTML que é gerado pelo JQuery Dialog, segue abaixo.

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
   <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
      <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
      <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
   </div>
   <div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
      <p>Dialog content goes here.</p>
   </div>
</div>

Referências

Tags: , ,