Dialogue jquery UI: comment initialiser sans barre de titre?

Est-il possible d’ouvrir une boîte de dialog d’interface utilisateur jQuery sans barre de titre?

Je pense que la meilleure solution est d’utiliser l’option dialogClass .

Un extrait de la documentation de l’interface de jquery:

pendant init: $('.selector').dialog({ dialogClass: 'noTitleStuff' });

ou si vous voulez après init. :

 $('.selector').dialog('option', 'dialogClass', 'noTitleStuff'); 

J’ai donc créé un dialog avec l’option dialogClass = ‘noTitleStuff’ et le css comme ça:

 .noTitleStuff .ui-dialog-titlebar {display:none} 

trop simple !! mais j’ai pris 1 jour pour réfléchir à la raison pour laquelle ma méthode de forage de classe id-> précédente ne fonctionnait pas. En fait, lorsque vous appelez la méthode .dialog() , le div que vous transformez devient un enfant d’un autre div (le div réel de dialog) et peut-être un «frère» de la div de la titlebar .

J’ai trouvé un correctif pour supprimer dynamicment la barre de titre.

 $("#example").dialog(dialogOpts); // remove the title bar $(".ui-dialog-titlebar").hide(); 

Cela supprimera tous les éléments avec la classe ‘ui-dialog-titlebar’ après le rendu de la boîte de dialog.

Je crois que vous pouvez le cacher avec CSS:

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

Vous pouvez également appliquer cela à des boîtes de dialog spécifiques avec l’option dialogClass :

 $( "#createUserDialog" ).dialog({ dialogClass: "no-titlebar" }); 
 .no-titlebar .ui-dialog-titlebar { display: none; } 

Découvrez ” Theming ” le dialog. La suggestion ci-dessus utilise l’option dialogClass , qui semble être en voie de dialogClass au profit d’une nouvelle méthode.

Je l’utilise dans mes projets

 $("#myDialog").dialog(dialogOpts); // remove the title bar $("#myDialog").siblings('div.ui-dialog-titlebar').remove(); // one liner $("#myDialog").dialog(dialogOpts).siblings('.ui-dialog-titlebar').remove(); 

Cela a fonctionné pour moi:

 $("#dialog").dialog({ create: function (event, ui) { $(".ui-widget-header").hide(); }, 

Essayez d’utiliser

 $("#mydialog").closest(".ui-dialog-titlebar").hide(); 

Cela cachera tous les titres de dialogs

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

En fait, il existe un autre moyen de le faire, en utilisant directement le widget dialog:

Vous pouvez ainsi obtenir le widget Dialog

 $("#example").dialog(dialogOpts); $dlgWidget = $('#example').dialog('widget'); 

et ensuite faire

 $dlgWidget.find(".ui-dialog-titlebar").hide(); 

masquer la titlebar dans cette boîte de dialog uniquement

et en une seule ligne de code (j’aime bien le chaînage):

 $('#example').dialog('widget').find(".ui-dialog-titlebar").hide(); 

Pas besoin d’append une classe supplémentaire à la boîte de dialog de cette façon, allez-y directement. Travaillez bien pour moi.

Je trouve plus efficace et plus lisible d’utiliser l’événement ouvert et de cacher la barre de titre. Je n’aime pas utiliser les recherches de noms de classe globales.

 open: function() { $(this).closest(".ui-dialog").find(".ui-dialog-titlebar:first").hide(); } 

Simple.

Vous pouvez utiliser jquery pour masquer la barre de titre après avoir utilisé dialogClass lors de l’initialisation de la boîte de dialog.

lors d’init:

 $('.selector').dialog({ dialogClass: 'yourclassname' }); $('.yourclassname div.ui-dialog-titlebar').hide(); 

En utilisant cette méthode, vous n’avez pas besoin de changer votre fichier css, et cela aussi est dynamic.

J’aime écraser les widgets jQuery.

 (function ($) { $.widget("sauti.dialog", $.ui.dialog, { options: { headerVisible: false }, _create: function () { // ready to generate button this._super("_create"); // for 18 would be $.Widget.prototype._create.call(this); // decide if header is visible if(this.options.headerVisible == false) this.uiDialogTitlebar.hide(); }, _setOption: function (key, value) { this._super(key, value); // for 1.8 would be $.Widget.prototype._setOption.apply( this, arguments ); if (key === "headerVisible") { if (key == false) this.uiDialogTitlebar.hide(); else this.uiDialogTitlebar.show(); return; } } }); })(jQuery); 

Donc, vous pouvez maintenant configurer si vous souhaitez afficher la barre de titre ou non

  $('#mydialog').dialog({ headerVisible: false // or true }); 

Si vous avez plusieurs dialogs, vous pouvez utiliser ceci:

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

C’est la manière la plus simple de le faire et cela ne fera que supprimer la barre de titre dans cette boîte de dialog spécifique.

 $('.dialog_selector').find('.ui-dialog-titlebar').hide(); 

La seule chose que j’ai découverte lors du masquage du titre de la boîte de dialog est que, même si l’affichage est nul, les lecteurs d’écran le capturent et le liront. Si vous avez déjà ajouté votre propre barre de titre, les deux seront lus, ce qui entraînera une certaine confusion.

Ce que j’ai fait a été supprimé du DOM en utilisant $(selector).remove() . Désormais, les lecteurs d’écran (et tous les autres) ne le verront pas car il n’existe plus.

Essaye ça

 $("#ui-dialog-title-divid").parent().hide(); 

remplacer le divid par l’ id correspondant

Je pense que la manière la plus propre de le faire serait de créer un nouveau widget myDialog, composé du widget de dialog moins le code à barres du titre. Exciser le code-barres de titre semble simple.

https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js

Cela a fonctionné pour moi pour masquer la barre de titre de la boîte de dialog:

 $(".ui-dialog-titlebar" ).css("display", "none" ); 

C’est comment cela peut être fait.

Aller dans le dossier des thèmes -> base -> ouvrir jquery.ui.dialog.css

Trouver

Les suivis

Si vous ne voulez pas afficher titleBar, réglez simplement l’affichage: aucun comme je l’ai fait dans la suite.

 .ui dialog.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; display:none; } 

Samilarly pour le titre aussi.

 .ui-dialog .ui-dialog-title { float: left; margin: .1em 0; white-space: nowrap; width: 90%; overflow: hidden; text-overflow: ellipsis; display:none; } 

Maintenant vient le bouton fermer, vous pouvez également le définir aucun ou vous pouvez définir son

 .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 21px; margin: -10px 0 0 0; padding: 1px; height: 20px; display:none; } 

J’ai fait beaucoup de recherches mais rien alors je n’ai eu cette idée en tête. Cependant, cela affectera toute l’application de ne pas avoir de bouton de fermeture, barre de titre pour la boîte de dialog, mais vous pouvez également y remédier en utilisant jquery et en ajoutant et en définissant css via jquery

voici la syntaxe pour cela

 $(".specificclass").css({display:normal}) 

Cette prochaine forme m’a résolu le problème.

 $('#btnShow').click(function() { $("#basicModal").dialog({ modal: true, height: 300, width: 400, create: function() { $(".ui-dialog").find(".ui-dialog-titlebar").css({ 'background-image': 'none', 'background-color': 'white', 'border': 'none' }); } }); }); 
 #basicModal { display: none; } 
    
Here your HTML content

Pour moi, je voulais toujours utiliser les coins redimensionnables, mais je ne voulais pas voir les lignes diagonales. j’ai utilisé

 $(".ui-resizable-handle").css("opacity","0"); 

Je viens de réaliser que je commentais la mauvaise question. À la hauteur de mon homonyme 🙁

Vous pouvez supprimer la barre avec l’icône de fermeture avec les techniques décrites ci-dessus, puis append vous-même une icône de fermeture.

CSS:

 .CloseButton { background: url('../icons/close-button.png'); width:15px; height:15px; border: 0px solid white; top:0; right:0; position:absolute; cursor: pointer; z-index:999; } 

HTML:

 var closeDiv = document.createElement("div"); closeDiv.className = "CloseButton"; 

// ajoute cette div à la div contenant votre contenu

JS:

  $(closeDiv).click(function () { $("yourDialogContent").dialog('close'); }); 

allez dans votre jquery-ui.js (dans mon cas jquery-ui-1.10.3.custom.js) et recherchez this._createTitlebar (); et commenter.

maintenant n’importe qui de votre dialog apparaîtra avec des en-têtes. Si vous souhaitez personnaliser l’en-tête, allez simplement dans _createTitlebar (); et modifiez le code à l’intérieur.

par