web-dev-qa-db-fra.com

Comment supprimer la barre de titre de la boîte de dialogue jQuery-ui?

J'essaie de masquer la barre de titre de la boîte de dialogue jQuery-ui dialog tout en maintenant le bouton de fermeture visible dans la barre de titre. J'ai cherché beaucoup d'articles sur stackoverflow comme celui-ci . Dans chaque message, la barre de titre est masquée mais l’espace occupé par la barre est toujours là. Je veux supprimer cet espace aussi mais sans enlever le bouton de fermeture.

Comment puis-je faire ceci?

javascriptjquerycssjquery-uijquery-ui-dialog
15
Tom Rider

Basé sur cette réponse :

Utilisez .dialog("widget") option pour localiser le wrapper div de la boîte de dialogue. Le wrapper contient tout le balisage utilisé pour la boîte de dialogue, y compris l'en-tête, la barre de titre et le bouton de fermeture; et le contenu du dialogue lui-même. Voici un moyen d'invoquer la méthode et de masquer la barre de titre:

$("#id").dialog({
    autoOpen: false
}).dialog("widget").find(".ui-dialog-title").hide();​

Vous pouvez ensuite utiliser CSS pour éliminer les marges, bordures et marges intérieures inutiles. Par exemple:

.ui-dialog-titlebar {
    float: right;
    border: 0;
    padding: 0;
}
.ui-dialog-titlebar-close {
    top: 0;
    right: 0;
    margin: 0;
    z-index: 999;
}

Voici une démo basée sur le code ci-dessus plus elle ajoute les styles nécessaires en utilisant jQuery.

18
Salman A

Si vous souhaitez supprimer la barre de titre et conserver l'icône de fermeture en utilisant uniquement les styles, utilisez les styles ci-dessous. Il réduit la barre de titre à la taille de l'icône de fermeture et la cache derrière. ui-icons_6e6e6e_256x240.png i créé en éclaircissant l'image ui-icons_222222_256x240.png fournie avec jqueryui.

.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");}
1
jonny

À mon avis, vous avez 3 options.

  1. Oui, éliminez complètement la barre de titre et ajoutez-en une personnalisée que vous pouvez styler pour correspondre à celle par défaut. Utiliser le positionnement absolu devrait être la clé.
  2. Si vous avez le temps, étendez (et non écrasez) la méthode _create du dialogue https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js#L74 faire ce dont vous avez besoin
  3. Travaillez avec hackery CSS pour conserver la barre de titre avec une hauteur de 0 pour tous les éléments sauf le bouton de fermeture.

Si l’un ou l’autre a ses inconvénients et ses avantages, je recommanderais le meilleur choix si vous le pouvez, voici quelques informations sur la façon de travailler avec des widgets http://api.jqueryui.com/jQuery.widget/

0
leopic

Voici comment cela peut être fait.

Allez dans le dossier themes -> base -> ouvrez jquery.ui.dialog.css

Trouver

Suivants

si vous ne souhaitez pas afficher titleBar, définissez simplement display: none, 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 bouton fermer, vous pouvez également définir aucun ou vous pouvez définir sa

.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 j'ai eu cette idée dans mon esprit. Cependant, cela aura pour effet d’appliquer l’ensemble de l’application sans bouton de fermeture ni barre de titre pour la boîte de dialogue, mais vous pouvez également remédier à cette situation en utilisant jquery et en ajoutant et en configurant CSS via jquery

voici la syntaxe pour cette

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