Ändern der Größe einer jquery-UI-dialog dynamisch

Ich habe ein jquery-dialog . Ich bin Anzeige asp.net gridview-Steuerelement in das Dialogfeld.
Ich möchte die Größe des dialogs zu ändern, basierend auf der Größe der grid-Ansicht.

Gibt es eine Schaltfläche zeigt den dialog, wenn Ihr auf Sie geklickt wird.

Möchte ich die Größe des Dialogfelds, so dass die gridview passt es perfekt.

   I have my javascript code below : 



 $("#ViewModalPopup").dialog({
                height: 800px,
                scrollable: true,
                width: 800,
                modal: true

            });

Hier #ViewModalPopup ist das div, welches den modalen popup.

Versuchte ich die Umsetzung der folgenden Logik in der Höhe verstellen den dialog auf die Größe des div :

var maxHeight = 600;
            var currentHeight = $('#ViewModalPopup').height();

if (currentHeight < maxHeight) {
                var desiredHeight = currentHeight
                }
            else
            {
                var desiredHeight = maxHeight;
                }

  $("#ViewModalPopup").dialog({
                    height: desiredheight,
                    scrollable: true,
                    width: 800,
                    modal: true

                });

Aber es funktioniert nicht so, wie 

var currentHeight = $('#ViewModalPopup').height();

kommt null aus der zweiten Schaltfläche klicken Sie auf weiter.

Gibt es eine Möglichkeit, ich kann das ändern der Größe des dialogs dynamisch ?

Was passiert, wenn man nicht Höhe festlegen?
Hallo Jason P ! Manchmal ist das gridview-Steuerelement so viele Zeilen, dass es erstreckt sich von der Oberseite zu der Unterseite des Bildschirms. Einstellung Höhe und setzen ein scrollbar-hilft bei der Begrenzung der Höhe des dialogs.
Also Sie wollen im Grunde eine max Höhe. Haben Sie versucht, die Einstellung der max-height auf Ihre dialog-div mit css?

InformationsquelleAutor CodeNinja | 2013-07-29

  1. 8

    Eingestellt wie 

     $("#ViewModalPopupDiv1").dialog("option", "maxHeight", 600);

    API

    Hey Vielen Dank ! $("#ViewModalPopupDiv1").dialog("option", "maxHeight", 600); war eigentlich das, was ich suchte . Danke für den Hinweis mich in die richtige Richtung.
    maxheight und nicht Höhe ?

    InformationsquelleAutor Suresh Atta

  2. 0
    /* set dynamic height of modal popup and scroll according to window height */
function setModalMaxHeight(element) {
    this.$element = $(element);
    this.$content = this.$element.find('.modal-content');
    var borderWidth = this.$content.outerHeight() - this.$content.innerHeight();
    var dialogMargin = $(window).width() < 768 ? 20 : 60;
    var contentHeight = $(window).height() - (dialogMargin + borderWidth);
    var headerHeight = this.$element.find('.modal-header').outerHeight() || 0;
    var footerHeight = this.$element.find('.modal-footer').outerHeight() || 0;
    var maxHeight = contentHeight - (headerHeight + footerHeight);

    this.$content.css({
        'overflow': 'hidden'
    });

    this.$element.find('.modal-body').css({
        'max-height': maxHeight,
        'overflow-y': 'auto'
    });
}
$('.modal').on('show.bs.modal', function () {
    $(this).show();
    setModalMaxHeight(this);
});
$(window).resize(function () {
    if ($('.modal.in').length != 0) {
        setModalMaxHeight($('.modal.in'));
    }
});
    Fügen Sie einige Beschreibung

    InformationsquelleAutor Awadhesh Singh

Schreibe einen Kommentar