web-dev-qa-db-fra.com

dialogue de jquery UI: comment initialiser sans barre de titre?

Est-il possible d'ouvrir une boîte de dialogue jQuery UI sans barre de titre?

jqueryjquery-ui
245
Loony2nz

J'ai trouvé un correctif pour supprimer dynamiquement la barre de titre.

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

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

95
Loony2nz

Je pense que la meilleure solution consiste à utiliser l'option dialogClass.

Un extrait de la documentation de jquery UI:

pendant 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 pris un jour pour réfléchir à la raison pour laquelle ma méthode de forage précédente id-> class ne fonctionnait pas. En fait, lorsque vous appelez la méthode .dialog(), la div que vous transformez devient l'enfant d'une autre div (la vraie div de dialogue) et éventuellement d'un «frère» de la titlebar div. Il est donc très difficile d'essayer de trouver cette dernière à partir d'ancien.

285
mizar

Je crois que vous pouvez le cacher avec CSS: 

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

Vous pouvez également l’appliquer à des dialogues spécifiques avec l’option dialogClass:

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

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

Consultez " Theming " dans la boîte de dialogue. La suggestion ci-dessus utilise l’option dialogClass, qui semble être sur c’est la solution en faveur d’une nouvelle méthode.

58
Sampson

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();
55
Amirouche Douda

Cela a fonctionné pour moi:

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

Essayez d'utiliser

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

Ceci cachera tous les titres de dialogues

$(".ui-dialog-titlebar").hide();
8
Firas Abd Alrahman

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

Vous pouvez obtenir le widget de dialogue ainsi 

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

et ensuite faire

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

pour masquer la titlebar dans cette boîte de dialogue uniquement

et dans une seule ligne de code (j'aime bien chaîner):

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

Pas besoin d'ajouter une classe supplémentaire au dialogue de cette façon, allez-y directement. Ça marche pour moi.

7
odedbd

Je trouve plus efficace et lisible d’utiliser l’événement open et d’en masquer la barre de titre. Je n'aime pas utiliser les recherches par nom de classe global.

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

Simple.

5
ingredient_15939

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

pendant 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, c’est aussi dynamique.

4
Arun Vasudevan Nair

J'aime remplacer 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 voulez afficher la barre de titre ou non

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

Si vous avez plusieurs dialogues, vous pouvez utiliser ceci:

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

C'est la façon la plus simple de le faire et cela ne supprimera la barre de titre que dans cette boîte de dialogue spécifique;

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

La seule chose que j’ai découverte en cachant la barre de titre de Dialog est que, même si l’affichage est inexistant, les lecteurs d’écran le saisissent et le lisent. Si vous avez déjà ajouté votre propre barre de titre, les deux sont lus, ce qui crée de la confusion. 

Ce que j'ai fait a été supprimé du DOM à l'aide de $(selector).remove(). Maintenant, les lecteurs d'écran (et tous les autres) ne le verront pas car il n'existe plus.

2
user616258

Essaye ça

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

remplacez divid par id correspondant

2
abdulkaderjeelani

Cela m'a permis de masquer la barre de titre de la boîte de dialogue: 

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

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 de fermeture, 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 affectera toute l'application de ne pas avoir le bouton fermer, la barre de titre pour la boîte de dialogue mise en css via jquery

voici la syntaxe pour cette 

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

Je pense que le moyen le plus simple de le faire serait de créer un nouveau widget myDialog, composé du widget de dialogue moins le code à barres du titre. L'excursion du code à barres du titre semble simple. 

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

1
Joffer

Pour moi, je voulais toujours utiliser les coins redimensionnables, je ne voulais tout simplement pas voir les lignes en diagonale. j'ai utilisé

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

Je viens de me rendre compte que je commentais la mauvaise question. Vivre jusqu'à mon homonyme :(

0
controlZ

Ce formulaire suivant m'a corrigé 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;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
<div id="basicModal">
  Here your HTML content
</div>
<button id="btnShow">Show me!</button>

0
jcromeros1987