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


Answers

Ho trovato una soluzione per rimuovere in modo dinamico 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.

Question

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




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

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



È possibile rimuovere la barra con l'icona di chiusura con i tecnici sopra descritti e quindi aggiungere un'icona vicina da soli.

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 con il tuo contenuto

JS:

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



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>




Mi piace sovrascrivere 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 o meno la barra del titolo

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



Prova a usare

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

Questo nasconderà tutti i titoli delle finestre di dialogo

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



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



Trovo più efficiente e più leggibile utilizzare l'evento open e nascondere la barra del titolo da lì. Non mi piace usare ricerche di nomi di classi globali per pagina.

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

Semplice.




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

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



Prova questo

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

sostituire i divid con id corrispondente






Related