web-dev-qa-db-fra.com

Comment supprimer le bouton de fermeture dans la boîte de dialogue de l'interface utilisateur jQuery?

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

jqueryhtmlcssjquery-uijquery-ui-dialog
747
Robert MacLean

J'ai trouvé que cela fonctionnait à la fin (notez la troisième ligne remplaçant la fonction d'ouverture 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 de toutes les boîtes de dialogue, vous pouvez également utiliser le CSS suivant:

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

Voici une autre option qui consiste à utiliser CSS pour ne pas surcharger chaque 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

350
David

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

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

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

Comme indiqué sur le page officiel et suggéré par David:

Créer 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 la masquer:

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

Je pense que c'est mieux.

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

Une fois que vous avez appelé .dialog() sur un élément, vous pouvez localiser le bouton de fermeture (et un autre balisage de la boîte de dialogue) à tout moment, sans utiliser de gestionnaire d'événement:

$("#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, this fait référence à l'élément "dialogué" et $(this).parent() au conteneur de balisage de dialogue, ainsi:

$("#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 votre information, le balisage de la boîte 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

33
Salman A

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(); }
});
25
FLY
$("#div2").dialog({
   closeOnEscape: false,
   open: function(event, ui) { $('#div2').parent().find('a.ui-dialog-titlebar-close').hide();}
});
9
Alok Vad

Aucune de ces solutions ne fonctionne. La solution qui fonctionne vraiment est la suivante:

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

S'il vous plaît vérifier si cela fonctionne pour vous.

9
Michael Zelensky

Le meilleur moyen de masquer le bouton est de le filtrer avec son attribut data-icon:

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

http://jsfiddle.net/marcosfromero/aWyNn/

$('#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
6
marcosfromero

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

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

yaaaay! Ça marche vraiment! J'attrape l'événement de fermeture de la boîte de dialogue. Dans le code ci-dessus, il supprime la div (#dhx_combo_list).

Génial, merci à vous tous!

6
ruwan

Pour la désactivation de la classe, le code court:

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

peut être utilisé.

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

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

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

qui supprime le bouton de fermeture.

3
mellow-yellow

Un moyen facile de réaliser: (Faites ceci 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
    },
    ....
});
2
Arsman Ahmad
document.querySelector('.ui-dialog-titlebar-close').style.display = 'none'
2
Matthew Wastrodowski

Depuis que j'ai découvert que je le faisais à plusieurs endroits de 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
bmode

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
wordragon

Pourquoi ne pas utiliser cette ligne CSS pure? Je trouve la solution la plus propre pour un dialogue avec un identifiant donné:

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