Comment faire pour supprimer le bouton de fermeture sur le jQuery UI dialog?
Comment puis-je supprimer le bouton fermer (le X dans le coin en haut à droite) sur une boîte de dialogue créé par jQuery UI?
- Vérifiez la documentation, premier sous-titre: api.jqueryui.com/dialog
- La documentation est de 1.10 - je pense que si vous souhaitez masquer le bouton fermer dans toute les versions antérieures, vous aurez besoin de faire quelque chose comme les réponses ci-dessous.
- Utiliser "ui-dialog-barre de titre-close": "display:none;" lorsque nous avons configuré l'jqueryui boîte de dialogue modale
Vous devez vous connecter pour publier un commentaire.
J'ai trouvé cette travaillé à la fin (note de la troisième ligne de substitution de la fonction d'ouverture qui se trouve le bouton et la cache):
Pour masquer le bouton de fermeture sur toutes les boîtes de dialogue vous pouvez utiliser le code CSS suivant: la
$(".ui-dialog-titlebar-close", ui).hide();
pour masquer le bouton de ce boîte de dialogue ne.ui
est défini comme un argument de fonction. Voir aussi api.jquery.com/jQuery/#jQuery1$(this).closest('.ui-dialog-titlebar-close').hide()
ui
seulement.ui.dialog
n'a pas. Testé sur IE8/Firefox3.6.open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }
open: function(event, ui) { $((event.target)).parent('.ui-dialog').find('.ui-dialog-titlebar-close').hide(); }
ui
? Pourquoiui
ouui.dialog
ou$(this).parent
. Mieux encore, quelqu'un peut-il nous indiquer à JQuery UI documentation décrivant ce à quoi s'attendre en tant que valeurs deevent
etui
?Ici est une autre option à l'aide de CSS qui n'est pas plus rouler chaque boîte de dialogue de la page.
Le CSS
Le code HTML
Le Javascript.
Exemple De Travail
dialogClass : $("#my-dialog-id").attr("class"),
la "meilleure" réponse ne sera pas bon pour de multiples boîtes de dialogue. ici, c'est une meilleure solution.
$(".ui-dialog-titlebar-close", $(this).parent()).hide();
Vous pouvez utiliser CSS pour cacher le bouton fermer au lieu de JavaScript:
Si vous ne voulez pas affecter tous les auxiliaires modaux, vous pouvez utiliser une règle de
Et appliquer
.hide-close-btn
vers le nœud supérieur de la boîte de dialogueComme indiqué sur le site officiel page et proposée par David:
Créer un style:
Ensuite, vous pouvez simplement ajouter la non-fermeture de classe à tout dialogue afin de masquer le bouton fermer de:
Je pense que c'est mieux.
Une fois que vous avez appelé
.dialog()
sur un élément, vous pouvez localiser le bouton fermer (et autre boîte de dialogue de la majoration), à tout moment convenable, sans l'aide des gestionnaires d'événement:Autre méthode:
Intérieur de la boîte de dialogue des gestionnaires d'événements,
this
se réfère à l'élément en cours de "dialogged" et$(this).parent()
fait référence à la boîte de dialogue de balisage container, donc:Pour info, dialogue balisage ressemble à ceci:
Démos ici
Robert Maclean's réponse n'a pas de travail pour moi.
Toutefois, cela fonctionne pour moi:
Aucun des travaux ci-dessus. La solution qui fonctionne vraiment est:
Veuillez vérifier si cela fonctionne pour vous.
La meilleure façon de cacher le bouton de filtre de données-icône de l'attribut:
http://jsfiddle.net/marcosfromero/aWyNn/
Pour la désactivation de la classe, le code court:
peut être utilisé.
Le bouton fermer ajouté par la boîte de Dialogue widget a la classe ui-dialog-barre de titre-fermer", donc après votre appel initial .la boîte de dialogue(), vous pouvez utiliser une instruction de ce genre pour supprimer le bouton fermer de nouveau:
Il fonctionne..
J'attrape la clôture de l'événement de la boîte de dialogue. Ce code supprime ensuite le
<div>
(#dhx_combo_list
):.hide()
n'est définiedisplay:none
dans le CSS, donc$(".ui-button-icon-only").hide();
est fonctionnellement équivalent à.ui-button-icon-only { display: none; }
.Vous pouvez également supprimer votre ligne d'en-tête:
<div data-role="header">...</div>
qui supprime le bouton fermer.
Moyen facile à atteindre: (dans votre
Javascript
)Depuis que j'ai découvert que je faisais ce, en plusieurs endroits, dans mon application, je l'ai enveloppé dans un plugin:
Exemple D'Utilisation:
Je suis un fan de one-liners (où ils travaillent!). Voici ce qui fonctionne pour moi:
Comment l'utilisation de ce pur CSS ligne?
Je trouve ce la solution la plus propre pour un dialogue avec l'Id donné:
Vous pouvez supprimer le bouton fermer avec le code ci-dessous. Il y a d'autres options qui pourraient vous battre utile.