finestra di dialogo dell'interfaccia utente jquery: come inizializzare senza una barra del titolo?

È possibile aprire una finestra di dialogo dell'interfaccia utente jQuery senza una barra del titolo?

Penso che la soluzione migliore sia usare l'opzione dialogClass.

Un estratto dai documenti dell'interfaccia utente di jquery:

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

o se vuoi dopo init. :

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

Quindi ho creato alcune finestre di dialogo con l'opzione dialogClass = 'noTitleStuff' e il CSS in questo modo:

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

Troppo facile !! ma ho impiegato 1 giorno per pensare al motivo per cui il mio precedente metodo di perforazione di classe id-> non funzionava. Infatti quando chiami .dialog()metodo il div che trasformi diventa figlio di un altro div (il vero dialog dialog div) e forse un "fratello" del titlebardiv, quindi è molto difficile provare a trovare quest'ultimo a partire dal primo.

Ho trovato una soluzione per rimuovere dinamicamente la barra del titolo.

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

Questo rimuoverà tutti gli elementi con la classe 'ui-dialog-titlebar' dopo il rendering della finestra di dialogo.

Credo che puoi nasconderlo con CSS:

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

In alternativa, puoi applicarlo a finestre di dialogo specifiche con l' dialogClassopzione:

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

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

Dai un'occhiata a " Temi " nella finestra di dialogo. Il suggerimento di cui sopra fa uso dialogClassdell'opzione, che sembra essere in procinto di uscire a favore di un nuovo metodo.

Lo uso nei miei progetti

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

Questo ha funzionato per me:

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

Prova a usare

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

Questo nasconderà tutti i titoli delle finestre di dialogo

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

In realtà c'è ancora un altro modo per farlo, usando widgetdirettamente la finestra di dialogo :

È possibile ottenere il widget di dialogo in questo modo

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

e poi fallo

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

per nascondere titlebarsolo quella finestra di dialogo

e in una singola riga di codice (mi piace concatenare):

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

Non è necessario aggiungere una classe extra alla finestra di dialogo in questo modo, basta andare direttamente su di essa. Funziona bene per me.

Trovo più efficiente e più leggibile utilizzare l' evento aperto e nascondere la barra del titolo da lì. Non mi piace usare le ricerche di nomi di classe globali di pagine.

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

Semplice.

Puoi usare jquery per nascondere la barra del titolo dopo aver usato dialogClass durante l'inizializzazione della finestra di dialogo.

durante init:

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

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

Utilizzando questo metodo, non è necessario modificare il file CSS e anche questo è dinamico.

Mi piace ignorare i widget 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);

Quindi ora puoi impostare se vuoi mostrare la barra del titolo o meno

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

Se hai più finestre di dialogo, puoi usare questo:

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

Questo è il modo più semplice per farlo e rimuoverà la barra del titolo solo in quella finestra di dialogo specifica;

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

L'unica cosa che ho scoperto nascondendo la barra del titolo della finestra di dialogo è che, anche se il display non è nessuno, gli screen reader lo raccolgono e lo leggeranno. Se hai già aggiunto la tua barra del titolo, leggerà entrambi, causando confusione.

Quello che ho fatto è stato rimosso dal DOM usando $(selector).remove(). Ora gli screen reader (e tutti gli altri) non lo vedranno perché non esiste più.

Prova questo

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

sostituire dividcon corrispondenteid

Questo modulo successivo mi ha risolto il problema.

$('#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>

Penso che il modo più pulito di farlo sarebbe quello di creare un nuovo widget myDialog, costituito dal widget della finestra di dialogo meno il codice a barre del titolo. L'eccitazione del codice a barre del titolo sembra semplice.

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

Questo ha funzionato per me nascondere la barra del titolo della finestra di dialogo:

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

Ecco come si può fare.

Vai alla cartella temi -> base -> apri jquery.ui.dialog.css

Trova

chi segue

se non si desidera visualizzare titleBar, impostare semplicemente display: none come ho fatto nel seguito.

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

Samilarly anche per il titolo.

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

Ora viene il pulsante di chiusura che puoi anche impostare nessuno o puoi impostarlo

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

}

Ho fatto molte ricerche, ma niente mi è venuta in mente questa idea. Tuttavia, ciò influirà sull'intera applicazione in modo da non avere il pulsante di chiusura, la barra del titolo per la finestra di dialogo, ma puoi anche superare questo utilizzando jquery e aggiungendo e impostando css tramite jquery

ecco la sintassi per questo

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

Per me, volevo ancora usare gli angoli ridimensionabili, ma non volevo, quindi vedere le linee diagonali. ero solito

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

Ho appena realizzato che stavo commentando la domanda sbagliata. Vivere fino al mio omonimo :(

Hai provato la soluzione dai documenti dell'interfaccia utente jQuery? https://api.jqueryui.com/dialog/#method-open

Come si dice, puoi fare così ...

Nel CSS:

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

In JS:

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

È possibile rimuovere la barra con l'icona di chiusura con le tecniche sopra descritte e quindi aggiungere un'icona di chiusura.

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

// aggiungi questo div al div che contiene i tuoi contenuti

JS:

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

vai su jquery-ui.js (nel mio caso jquery-ui-1.10.3.custom.js) e cerca this._createTitlebar (); e commentalo.

ora qualcuno della tua finestra di dialogo apparirà con le intestazioni. Se vuoi personalizzare l'intestazione vai su _createTitlebar (); e modifica il codice all'interno.

di