Dialogue jquery UI: comment initialiser sans barre de titre?

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

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

Un extrait des documents 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éé une boîte de dialogue 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 penser pourquoi ma méthode de forage précédente id-> class ne fonctionnait pas. En fait, lorsque vous appelez la .dialog()méthode, le div que vous transformez devient l'enfant d'un autre div (le vrai dialogue div) et peut-être un `` frère '' du titlebardiv, il est donc très difficile d'essayer de trouver ce dernier à partir de l'ancien.

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 avec la classe 'ui-dialog-titlebar' après le rendu de la boîte de dialogue.

Je pense que vous pouvez le cacher avec CSS:

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

Alternativement, vous pouvez l'appliquer à des boîtes de dialogue spécifiques avec l' dialogClassoption:

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

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

Découvrez " Theming " la boîte de dialogue. La suggestion ci-dessus utilise l' dialogClassoption, qui semble être sur le point de disparaître en faveur d'une nouvelle méthode.

J'utilise ceci 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 masquera tous les titres des dialogues

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

En fait, il y a encore une autre façon de le faire, en utilisant widgetdirectement la boîte de dialogue :

Vous pouvez ainsi obtenir le Widget de dialogue

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

puis faire

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

pour masquer le titlebarcontenu de cette boîte de dialogue uniquement

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

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

Pas besoin d'ajouter une classe supplémentaire à la boîte de dialogue de cette façon, allez-y directement. Ça marche bien pour moi.

Je trouve plus efficace et plus lisible d'utiliser l' événement ouvert et de masquer la barre de titre à partir de là. Je n'aime pas utiliser les recherches de nom de classe de page globale.

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

Facile.

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 l'init:

$('.selector').dialog({
    dialogClass: 'yourclassname'
});

$('.yourclassname div.ui-dialog-titlebar').hide();

En utilisant cette méthode, vous n'avez pas besoin de modifier votre fichier css, ce qui est également dynamique.

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);

Vous pouvez donc maintenant configurer si vous souhaitez afficher la barre de titre ou non

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

Si vous avez plusieurs boîtes de dialogue, vous pouvez utiliser ceci:

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

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

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

La seule chose que j'ai découverte en masquant la barre de titre de la boîte de dialogue est que, même si l'affichage n'est pas affiché, les lecteurs d'écran la prennent et la lisent. Si vous avez déjà ajouté votre propre barre de titre, elle lira les deux, ce qui créera de la confusion.

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

Essaye ça

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

remplacer dividpar correspondantid

Ce formulaire suivant 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;
}

<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>

Je pense que la façon la plus simple de le faire serait de créer un nouveau widget myDialog, composé du widget de dialogue moins le code à barres du titre. Exciser le code à barres du titre semble simple.

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

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

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

Voici comment cela peut être fait.

Allez dans le dossier des thèmes -> base -> ouvrez jquery.ui.dialog.css

Trouver

Abonnements

si vous ne voulez pas afficher titleBar, définissez simplement display: none comme je l'ai fait ci-dessous.

.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; 
}

Vient maintenant le bouton de fermeture, 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 j'ai eu cette idée en tête. Cependant, cela affectera l'application entière à ne pas avoir de bouton de fermeture, de barre de titre pour la boîte de dialogue, mais vous pouvez également surmonter cela en utilisant jquery et en ajoutant et en définissant css via jquery

voici la syntaxe pour cela

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

Pour moi, je voulais toujours utiliser les coins redimensionnables, je ne voulais tout simplement 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 :(

Avez-vous essayé la solution à partir des documents jQuery UI? https://api.jqueryui.com/dialog/#method-open

Comme il est dit, vous pouvez faire comme ça ...

En CSS:

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

En JS:

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

Vous pouvez supprimer la barre avec l'icône de fermeture avec les technologies décrites ci-dessus, puis ajouter 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 ce div au 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 le commenter.

maintenant, n'importe lequel de vos dialogues apparaîtra avec des en-têtes. Si vous souhaitez personnaliser l'en-tête, allez simplement dans _createTitlebar (); et éditez le code à l'intérieur.

par