Est-il possible d'ouvrir une boîte de dialogue jQuery UI sans barre de titre ?
+1 La solution de Jonatan ne fonctionne pas pour un dialogue particulier. La vôtre oui.
Réponses
Trop de publicités?
mizar
Points
1949
Je pense que la meilleure solution est d'utiliser l'option dialogClass .
Un extrait de la documentation de jquery UI :
pendant l'init : $('.selector').dialog({ dialogClass: 'noTitleStuff' });
ou si vous voulez après init. :
$('.selector').dialog('option', 'dialogClass', 'noTitleStuff');J'ai donc créé un dialogue avec l'option dialogClass='noTitleStuff' et le css comme ça :
.noTitleStuff .ui-dialog-titlebar {display:none}trop simple ! ! mais j'ai mis 1 jour à réfléchir pourquoi ma méthode précédente de forage id->class ne fonctionnait pas. En fait, lorsque vous appelez .dialog() la div que vous transformez devient un enfant d'une autre div (la vraie div de dialogue) et éventuellement un "frère" de la div de dialogue. titlebar div, il est donc très difficile d'essayer de trouver le second à partir du premier.
Je suis d'accord avec mizar. C'est la meilleure solution car elle vous permet d'être spécifique aux boîtes de dialogue qui n'ont que la classe que vous avez définie.
Le seul inconvénient de cette méthode est que Chrome ajoute une barre de défilement verticale pour une telle boîte de dialogue lorsqu'elle est configurée comme modale, parce que d'une manière ou d'une autre, jQuery commence à calculer incorrectement la hauteur de son ui-widget-overlay.... Je n'ai pas creusé plus profondément, et je n'ai pas trouvé de solution rapide en dehors de l'utilisation de { overflow : hidden }.
...et l'option css supprime toute chance de les voir apparaître avant. Je ne suis pas sûr de voir un quelconque avantage dans votre alternative. En réalité, votre alternative va faire ce que j'ai fait, en ajoutant seulement une étape supplémentaire. L'option CSS sera plus rapide.
Mon option ne supprimera la barre de titre que pour cette seule boîte de dialogue. Si j'utilisais votre option, je supprimerais la barre de titre de toutes mes boîtes de dialogue. Je peux voir dans le futur que j'aurai besoin d'une barre de titre.
Vous incluez donc votre élément dans la règle css : #example .ui-dialog-titlebar... . Cela fonctionnera de l'une ou l'autre façon, mais le Javascript finira par définir le css, donc je ne vois pas l'avantage de ne pas le faire en css pour commencer. Cela ne fait pas vraiment de différence - faites ce qui vous convient le mieux :)
Jonathan Sampson
Points
121800
Je crois que vous pouvez le cacher avec CSS :
.ui-dialog-titlebar {
display: none;
}Vous pouvez également l'appliquer à des boîtes de dialogue spécifiques avec la commande dialogClass option :
$( "#createUserDialog" ).dialog({
dialogClass: "no-titlebar"
});
.no-titlebar .ui-dialog-titlebar {
display: none;
}Consultez " Thématisation " le dialogue. La suggestion ci-dessus fait appel à la fonction dialogClass qui semble être sur c'est la sortie en faveur d'une nouvelle méthode.
Oui, je suppose que cela pourrait fonctionner, mais c'est une option globale. Je me demandais s'il y avait un moyen de le faire avec des options. J'imagine que je peux faire du jquery'ness de pré-rendu pour supprimer la div titre avant qu'elle ne soit affichée.
Non. Je ne pense pas qu'il existe une option pour le supprimer. Par défaut, c'est le bouton de fermeture, donc dans un sens, c'est presque une mauvaise conception.
Amirouche Douda
Points
988
Encore mieux : supprimer la barre de titre mais pas le bouton de fermeture. Conservez sa fonctionnalité. $(document).ready(function() { $('#video').click(function(){ $( "#dialog" ).dialog().siblings('.ui-dialog-titlebar').removeClass('ui-widget-header'); }); });
$("#myDialog").dialog('open').siblings('.ui-dialog-titlebar').remove(); est la meilleure réponse à mon avis +1 pour cette ligne de code
Vous pouvez également rechercher le frère précédent, qui est la barre de titre : .ui-dialog-titlebar : $("#myDialog").prev().hide() o $("#myDialog").prev(".ui-dialog-titlebar").hide() .
Koder
Points
131
Cela cachera les en-têtes dans tous dialogues. Ma suggestion ci-dessous (réponse suivante) ne le fera que pour la boîte de dialogue en cours d'ouverture.
