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
- http://www.coderanch.com/t/547121/HTML-CSS-JavaScript/JQuery-Dialog-Box-Positioning-Replacing
- http://bugs.jqueryui.com/ticket/7111
- https://groups.google.com/forum/?fromgroups=#!topic/jquery-ui/nI–MKkTlsw
- http://docs.jquery.com/UI/Dialog#How_do_I_prevent_the_close_button_.27X.27_from_being_added_to_the_dialog_.3F