Comment supprimer le bouton de fermeture de la boîte de dialogue jQuery UI?


775

Comment supprimer le bouton de fermeture (le X dans le coin supérieur droit) d'une boîte de dialogue créée par l'interface utilisateur jQuery?


11
Consultez la documentation, premier sous-titre: api.jqueryui.com/dialog
Mike Cole

1
@MikeCole La documentation est pour 1.10 - Je pense que si vous voulez cacher le bouton de fermeture dans toutes les versions inférieures, vous devrez faire quelque chose comme les réponses ci-dessous.
Jarrett

1
Utilisez "ui-dialog-titlebar-close": "display: none;" lorsque nous configurons la boîte de dialogue modale
jqueryui

Réponses:


711

J'ai trouvé que cela fonctionnait à la fin (notez la troisième ligne remplaçant la fonction ouverte qui trouve le bouton et le cache):

$("#div2").dialog({
    closeOnEscape: false,
    open: function(event, ui) {
        $(".ui-dialog-titlebar-close", ui.dialog || ui).hide();
    }
});

Pour masquer le bouton de fermeture dans toutes les boîtes de dialogue, vous pouvez également utiliser le CSS suivant:

.ui-dialog-titlebar-close {
    visibility: hidden;
}

121
$(".ui-dialog-titlebar-close", ui).hide();pour masquer le bouton de cette boîte de dialogue uniquement.
Anthony Serdyukov

67
Je ne pouvais pas non plus le faire fonctionner à partir du paramètre ui. J'ai fini par utiliser: $ (". Ui-dialog-titlebar-close", $ (this) .parent ()). Hide ();
Nigel

70
@Anton Je veux juste souligner que la simple spécification de 'ui' ne fonctionne pas. vous devez utiliser 'ui.dialog'. donc la ligne correcte serait $ (". ui-dialog-titlebar-close", ui.dialog) .hide ();
Bradley Mountford

22
@Bradley. ui n'a pas fonctionné pour moi, ui.dialog l'a fait mais s'est appliqué à chaque instance. Pour que ot working ne s'applique qu'à celle pour laquelle la fonction open est définie, je devais faire ceci: $ (". Ui-dialog-titlebar-close", this.parentNode) .hide ();
Nabab

12
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }
opengrid

361

Voici une autre option utilisant simplement CSS qui ne dépasse pas toutes les boîtes de dialogue de la page.

Le CSS

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

Le HTML

<div class="selector" title="No close button">
    This is a test without a close button
</div>

Le Javascript.

$( ".selector" ).dialog({ dialogClass: 'no-close' });

Exemple de travail


6
J'aime cette approche car je peux l'utiliser à côté de choses comme: .noTitleDlg .ui-dialog-titlebar {display: none} en CSS pour construire la façon dont je veux que ma boîte de dialogue apparaisse et se comporte, puis définissez simplement dialogClass en conséquence.
A. Murray,

11
solution très propre ... +1 pour ne pas impliquer de fonctionnalité js supplémentaire pour supprimer le bouton.
Bongs

2
Bonne idée. Cela est pratique pour cibler une boîte de dialogue spécifique dans les situations où vous utilisez la même méthode ouverte pour toutes les boîtes de dialogue, et il n'est pas très pratique de la modifier pour une instance spécifique.
ZolaKt

3
Ma solution préférée. Je pensais que quelque chose comme ça serait la meilleure approche. Merci de l'avoir déjà codé ici. Sur cette base, j'aime utiliser cette variation qui prendra l'attribut de classe de la div de contenu de la boîte de dialogue, dans laquelle je peux mettre la classe "no-close":dialogClass : $("#my-dialog-id").attr("class"),
LS

Cette solution permet la fermeture avec échappement, si vous souhaitez empêcher la fermeture lors de l'utilisation de l'évacuation:$( ".selector" ).dialog({ dialogClass: 'no-close' , closeOnEscape: false,});
Mladen Adamovic

124

la «meilleure» réponse ne sera pas bonne pour plusieurs dialogues. voici une meilleure solution.

open: function(event, ui) { 
    //hide close button.
    $(this).parent().children().children('.ui-dialog-titlebar-close').hide();
},

23
C'est plus compliqué que nécessaire. $(".ui-dialog-titlebar-close", $(this).parent()).hide();
Kevin Panko

@KevinPanko, votre suggestion fonctionne bien lorsque vous utilisez l'exemple fourni par le site de démonstration jquery ui avec ASP.NET v2.0 dans une page .aspx. jqueryui.com/demos/dialog/modal-form.html
Matthew Dally

6
.closest ('. ui-dialog') est mieux que de supposer un parent.
technomage

86

Vous pouvez utiliser CSS pour masquer le bouton de fermeture au lieu de JavaScript:

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

Si vous ne voulez pas affecter tous les modaux, vous pouvez utiliser une règle comme

.hide-close-btn .ui-dialog-titlebar-close{
    display: none;
}

Et appliquer .hide-close-btnau nœud supérieur de la boîte de dialogue


3
Cette réponse était simple et directe. Elle ne s'applique cependant que si vous souhaitez désactiver le bouton pour toutes les boîtes de dialogue.
Mark Brittingham

@MarkBrittingham Vous pouvez simplement appliquer une classe CSS personnalisée à votre modal et au sélecteur, puis cela s'appliquera à qui vous voulez
Juan Mendes

48

Comme indiqué sur la page officielle et suggéré par David:

Créez un style:

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

Ensuite, vous pouvez simplement ajouter la classe no-close à n'importe quelle boîte de dialogue afin de masquer son bouton de fermeture:

$( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [{
        text: "OK",
        click: function() {
            $( this ).dialog( "close" );
        }
    }]
});

41

Je pense que c'est mieux.

open: function(event, ui) {
  $(this).closest('.ui-dialog').find('.ui-dialog-titlebar-close').hide();
}

Le problème est qu'il cache parfois le bouton de fermeture pour d'autres dialogues. comment éviter cela.
Zaveed Abbasi

Même en utilisant open: function (event, ui) {$ (this) .closest ('. Ui-dialog'). Find ('. Ui-dialog-titlebar-close'). Show (); } ne fonctionne pas.
Zaveed Abbasi

34

Une fois que vous avez appelé .dialog()un élément, vous pouvez localiser le bouton de fermeture (et les autres balises de dialogue) à tout moment sans utiliser de gestionnaires d'événements:

$("#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éthode alternative:

Dans les gestionnaires d'événements de dialogue, thisfait référence à l'élément "dialogué" et $(this).parent()fait référence au conteneur de balisage de dialogue, donc:

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

Pour info, le balisage de dialogue ressemble à ceci:

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
    <!-- ^--- this is the dialog widget -->
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
        <span class="ui-dialog-title" id="ui-dialog-title-dialog">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 id="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>

Démos ici


25

La réponse de Robert MacLean n'a pas fonctionné pour moi.

Cela fonctionne cependant pour moi:

$("#div").dialog({
   open: function() { $(".ui-dialog-titlebar-close").hide(); }
});

9
$("#div2").dialog({
   closeOnEscape: false,
   open: function(event, ui) { $('#div2').parent().find('a.ui-dialog-titlebar-close').hide();}
});

9

Aucun des travaux ci-dessus. La solution qui fonctionne vraiment est:

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

Veuillez vérifier si cela fonctionne pour vous.


7

La meilleure façon de masquer le bouton est de le filtrer avec son attribut icône de données:

$('#dialog-id [data-icon="delete"]').hide();


6

Pour désactiver la classe, le code court:

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

peut être utilisé.


6

Le bouton de fermeture ajouté par le widget Dialog a la classe 'ui-dialog-titlebar-close', donc après votre appel initial à .dialog (), vous pouvez utiliser une instruction comme celle-ci pour supprimer à nouveau le bouton de fermeture: Cela fonctionne.

$( 'a.ui-dialog-titlebar-close' ).remove();

6

J'attrape l'événement de fermeture de la boîte de dialogue. Ce code supprime ensuite le <div>( #dhx_combo_list):

open: function(event, ui) { 
  //hide close button.
  $(this).parent().children().children('.ui-dialog-titlebar-close').click(function(){
    $("#dhx_combo_list").remove();
  });
},

5
$(".ui-button-icon-only").hide();

2
Vous devriez pouvoir utiliser du CSS direct ici au lieu de JS si vous ne cachez que l'icône. Tout ce .hide()qui est défini display:noneen CSS, $(".ui-button-icon-only").hide();est donc fonctionnellement équivalent à .ui-button-icon-only { display: none; }.
KyleMit

3

Vous pouvez également supprimer votre ligne d'en-tête:

<div data-role="header">...</div>

ce qui supprime le bouton de fermeture.



2

Un moyen facile de réaliser: (Faites cela dans votre Javascript)

$("selector").dialog({
    autoOpen: false,
    open: function(event, ui) {   // It'll hide Close button
        $(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
    },
    closeOnEscape: false,        // Do not close dialog on press Esc button
    show: {
        effect: "clip",
        duration: 500
    },
    hide: {
        effect: "blind",
        duration: 200
    },
    ....
});

1

Comme j'ai découvert que je faisais cela à plusieurs endroits dans mon application, je l'ai enveloppé dans un plugin:

(function ($) {
   $.fn.dialogNoClose = function () {
      return this.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)

Exemple d'utilisation:

$("#dialog").dialog({ /* lots of options */ }).dialogNoClose();

0

Je suis fan des one-liners (où ils travaillent!). Voici ce qui fonctionne pour moi:

$("#dialog").siblings(".ui-dialog-titlebar").find(".ui-dialog-titlebar-close").hide();

0

Que diriez-vous d'utiliser cette ligne CSS pure? Je trouve que c'est la solution la plus propre pour un dialogue avec un ID donné:

.ui-dialog[aria-describedby="IdValueOfDialog"] .ui-dialog-titlebar-close { display: none; }

-1

Vous pouvez supprimer le bouton de fermeture avec le code ci-dessous. Il existe également d'autres options que vous pourriez juger utiles.

$('#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();
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.