Suppression de la barre de titre de jQueryUI Dialogue?

Comment puis-je supprimer la barre de titre.

J'ai vérifié l'API ici, mais ne pouvait pas trouver quoi que ce soit.

http://api.jqueryui.com/dialog/

J'ai remarqué que d'autres "solutions" ont une glacière apparence graphique jQuery, en particulier

http://www.ericmmartin.com/projects/simplemodal/

Cependant je voudrais utiliser jQueryUI.b.c. de toutes les ressources en ligne...la documentation de l'API, des tutoriels, etc.

J'ai juste besoin de savoir comment se débarrasser de la barre de titre?

Grâce

pourquoi ne pas vous le cacher avec du css?
display:none devrait le faire

InformationsquelleAutor | 2012-10-15

5

Donné el que l'élément d'origine à partir de laquelle le dialogue a été créé:
```
$(el).siblings('.ui-dialog-titlebar').remove();
```
Voir http://jsfiddle.net/alnitak/N9TGd/

Noter que le fait de retirer la barre de titre (par la question du titre) va également supprimer le bouton fermer, et de briser la capacité à faire glisser la boîte de dialogue!
- frapper la touche F12 dans le navigateur , inspecter l'élément , et vous pouvez masquer ou de modifier une partie de la boîte de dialogue en css ou js - vous demandé comment il savait que la classe du titre
- un modal est plus que cela - vous avez également besoin d'un panneau de recouvrement qui se trouve derrière le modal, mais en face de tout autre contenu qui va absorber tous les autres à l'utilisateur de générer des événements.
- ok...je suis sûr que je vais être capable de détecter mes événements..je sais tout sur un bouillonnement et des écouteurs d'événement.
- Je vais poster un violon de ma personnalisation ici dans un peu une fois que c'est fait..va faire un "verre" derrière elle...ou le panneau de recouvrement de avez-vous.
- méfiez-vous des tabIndex - vous devez vous assurer qu'aucun autre élément ne peut obtenir le focus. Le jQuery dialogue tout cela pour vous, au détriment d'autres trucs que vous n'avez pas besoin...
InformationsquelleAutor Alnitak
9

Il ya quelques options.

Cacher avec CSS

.ui-dialog-titlebar { display: none }

Cacher avec Javascript

Cela permettra de supprimer la barre de titre lorsque la boîte de dialogue est créé, mais il permettra de préserver le bouton fermer.
```
$("div").dialog({
  create: function( event, ui ) {
      var dialog = $(this).closest(".ui-dialog");
      dialog.find(".ui-dialog-titlebar-close")
            .appendTo(dialog)
            .css({
              position: "absolute",
              top: 0,
              right: 0,
              margin: "3px"
            });
      dialog.find(".ui-dialog-titlebar").remove();
  }
})
```
Voir démo: http://jsfiddle.net/4AuhC/52/
- non, elle ne le fait pas...
- oui, maintenant vous l'avez résolu. L'original de votre supposé que la barre de titre a été un enfant de la boîte de dialogue de l'élément, quand il est en fait un frère ou une sœur.
InformationsquelleAutor jessegavin
5

Ajouter cette CSS après jQuery UI CSS.

Attention: pas plus de fermer les boutons et vous ne pouvez pas faire glisser plus!
```
.ui-dialog-titlebar { display: none }
```
jsFiddle: http://jsfiddle.net/PeVvA/

Si vous voulez garder de glisser et de boutons, mais il pourrait ne pas fonctionner sur tous les thèmes..
```
.ui-dialog-titlebar { background: none; border: 0px solid black }
```
jsFiddle: http://jsfiddle.net/PeVvA/1/

Vous pourriez probablement faire plus simplement en utilisant le CSS. Je serais probablement jouer avec la hauteur.
- les boutons de fermeture appartiennent dans la barre de titre - où avez-vous vous attendez à aller si la barre de titre est allé?
- il n'est pas simple - le bouton de fermeture est un descendant de la barre de titre.
- J'ai mis à jour la réponse. Vous pouvez mettre de supprimer l'arrière-plan et de supprimer la frontière.
InformationsquelleAutor Aktee
3

Vous pouvez essayer d'ajouter ceci dans votre CSS directement..
```
.ui-dialog-titlebar
{ 
   display: none !important;
}
```
- C'est la voie que j'irais. Dans le cas où il ne veut pas masquer la barre de titre sur tous jQuery boîte de Dialogue de windows, il peut avoir, le sélecteur css pourrait facilement être plus spécifique #container .ui-dialog-titlebar { ... }.
- ouais.. c'est vrai.. Il peut cibler quelques jQuery auxiliaires Modaux en les préfixant avec un conteneur
- comme avec les réponses qui en fait supprimer l'élément, cette rupture de la traînée et à proximité de la fonctionnalité. En laissant l'élément en place, mais de style de sorte que vous ne pouvez pas réellement voir est probablement la meilleure réponse.
InformationsquelleAutor Sushanth --

Essayez ceci:

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

(Ou)

$("#dlg").dialog({
  open: function() {
    $(this).dialog("widget").find(".ui-dialog-titlebar").hide();
  }
});

InformationsquelleAutor coder

Si vous souhaitez supprimer le titelbar et de garder l'icône de fermeture à l'aide de styles uniquement, utilisez les styles ci-dessous. Il réduit le volume de la barre de titre de la taille de l'icône de fermeture et se cache derrière. ui-icons_6e6e6e_256x240.png J'ai créé par l'allègement de la ui-icons_222222_256x240.png image que jqueryui qui vient avec.

.ui-dialog .ui-dialog-titlebar.ui-widget-header{background: none; border: none; height: 20px; width: 20px; padding: 0px; position: static; float: right; margin: 0px 2px 0px 0px;}

.ui-dialog-titlebar.ui-widget-header .ui-dialog-title{display: none;}

.ui-dialog-titlebar.ui-widget-header .ui-button{background: none; border: 1px solid #CCCCCC;}

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close{margin: 0px; position: static;}

.ui-dialog .dialog.ui-dialog-content{padding: 0px 10px 10px 10px;}

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon{position: relative; margin-top: 0px; margin-left: 0px; top: 0px; left: 0px;}

.ui-dialog .ui-dialog-titlebar .ui-state-default .ui-icon {background-image: url("/css/ui-lightness/images/ui-icons_6e6e6e_256x240.png");}

.ui-dialog .ui-dialog-titlebar .ui-state-hover .ui-icon {background-image: url("/css/ui-lightness/images/ui-icons_222222_256x240.png");}

Si vous voulez faire la totalité de la boîte de dialogue déplaçable, utilisez ceci: $("#yourdialog").parent().draggable(); (après la création de la boîte de dialogue)

InformationsquelleAutor jonny

Vous devez vous connecter pour publier un commentaire.