LightFace模態插件以及寬度和高度問題

Question

我正在使用LightFace，並且工作正常。 我正在從服務器端獲取數據並將數據分配到LightFace對話框中，但問題是對話框的高度和寬度沒有根據內容大小變大。 因此，請指導我在代碼中需要糾正的內容。 我給出了我的代碼的一小部分。 我需要對話框應根據內容大小增加和縮小。 請以少量代碼指導我。 謝謝

 var modal = "";
    var sHtml = "";

    jQuery.noConflict();
    jQuery(document).ready(function () {
        jQuery("#btnFeedback1").click(function () {
            var modal = new LightFace({
                draggable: true,
                height: 200,
                width: 300,
                title: 'My Profile',
                content: '<div class="BusyStyles"><div>',
                buttons: [
                { title: 'OK', event: function () {
                    if (Validate()) {
                        if (Save()) {
                            this.close();
                        }
                    }
                }
                },
                { title: 'Close', event: function () { this.close(); } }
            ]
            }).open();

            jQuery.ajax({
                type: "POST",
                url: "Dialog_LightFace.aspx/GetHtml",
                data: {},
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    sHtml = data.d;
                    modal.load(jQuery(sHtml).find('#frm').html())
                    //modal.load('<div css="BusyStyles"><img src="images/fbloader.gif" border="0" /><div>');
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }

            });

            return false;
        });
    });

Answer 1

如果可以的話，請嘗試使用一些示例代碼制作一個JSFiddle 。 對我們來說調試起來更容易。

我認為問題在於您在加載任何內容之前已經打開了對話框。 因此，在確定內容之前，將對話框設置為寬度和高度。

嘗試這個：

• 刪除.open（）; 制作var模態實例后

• 把它放在jQuery.ajax.success中：

   success: function (data) { sHtml = data.d; modal.load(jQuery(sHtml).find('#frm').html()).open(); } 

如果這沒有幫助，請嘗試將width和height設置為'auto'然后看看會發生什么。

編輯

以編程方式設置寬度和高度：

jQuery.ajax({
   type: "POST",
   url: "Dialog_LightFace.aspx/GetHtml",
   data: {},
   contentType: "application/json; charset=utf-8",
   dataType: "json",
   success: function (data) {
     var sHtml = data.d;

     // Get the element and dimensions
     var element = jQuery(sHtml).find('#frm');
     var width = element.width();
     var height = element.height();

     var modal = new LightFace({
       // all other options plus:
       width: width,
       height: height
     });
     modal.load(element.html()).open();
   },
   error: function (XMLHttpRequest, textStatus, errorThrown) {
     alert(textStatus);
   }
});

這段代碼可能需要稍作調整，因為我直接編寫了此代碼，但這說明了它應該如何工作。