如何動態更改模態對話框的大小？

我在主頁面有一個模式對話框，然後我添加jPlayer到這個對話框。所有的工作都很好，但我在這個對話中只看到了一部分玩家。如何在插入播放器後將對話框大小更改爲播放器大小？如何動態更改模態對話框的大小？

即我想插入音頻或視頻播放器到這個對話框，他們有不同的大小。

$(document).ready(function(){ 

    $("#jquery_jplayer_1").jPlayer({ 
     ready: function() { 
      $(this).jPlayer("setMedia", { 
       mp3: "media/track.mp3", 
      }).jPlayer("play"); // auto play 
     }, 
     ended: function (event) { 
      $(this).jPlayer("play"); 
     }, 
     swfPath: "swf", 
     supplied: "mp3" 
    }) 
    .bind($.jPlayer.event.play, function() { // pause other instances of player when current one play 
      $(this).jPlayer("pauseOthers"); 
    }); 
    }); 


<script type="text/javascript"> 

     $.ajaxSetup({ cache: false }); 

     $(document).ready(function() { 
      $(".openDialog").live("click", function (e) { 
       e.preventDefault(); 

       $("<div></div>") 
        .addClass("dialog") 
        .attr("id", $(this) 
        .attr("data-dialog-id")) 
        .appendTo("body") 
        .dialog({ 
         title: $(this).attr("data-dialog-title"), 
         close: function() { $(this).remove() }, 
         modal: true 
        }) 
        .load(this.href); 
      }); 

      $(".close").live("click", function (e) { 
       e.preventDefault(); 
       $(this).closest(".dialog").dialog("close"); 
      }); 
     }); 
    </script>

來源

2011-12-28 Oleg

我猜你正在使用jQuery UI的對話框小部件。如果是這樣，那麼你可以針對通過CSS元素（這將是更好的性能比在JavaScript這樣做）：

.ui-dialog { 
    width : 500px; 
    height : 150px; 
}

如果你有多個對話，那麼你應該讓CSS選擇器略高於更獨特：

#root-element .ui-dialog { 
    width : 500px; 
    height : 150px; 
}

另外，該線路應該拋出一個錯誤：

.attr("id", $(this)

應加以改變的東西是這樣的：

.attr("id", $(this).attr('id') + '_dialog')

這將使對話框的ID與單擊的按鈕相同，以便在末尾附加_dialog。

UPDATE

如果你想通過JavaScript這樣做（比如點擊一個鏈接後），那麼你可以使用jQuery的.css()功能改變材料的尺寸爲必要的：

$('#some-link').bind('click', function() { 
    $('.ui-dialog').css({ 
     width : 500px, 
     height : 150px 
    }); 
});

如果您不知道要使用的高度/寬度值，則可以檢查對話框內容的值：

$('#some-link').bind('click', function() { 
    var $dialog = $('.ui-dialog'); 
    $dialog.append('<div class="audio" style="width:123px; height: 321px;"></div>'); 
    $dialog.css({ 
     width : $dialog.children('.audio').width(),//note that pixels will be assumed so it is not necessary to specify `px` 
     height : $dialog.children('.audio').height() 
    }); 
});

來源

2011-12-28 20:51:02 Jasper

但它將是靜態值？我不認識他們。例如：有文件列表（mp3，mp4）加載到頁面，當用戶點擊文件時我需要打開對話框並插入音頻或視頻播放器。在這一點上，我需要改變對話框大小以適應玩家。 – Oleg 2011-12-28 20:56:28

@ Oleg I **更新了**我的回答，希望對以前的嘗試會有幫助。 – Jasper 2011-12-28 21:19:01

好吧，我會檢查它是如何工作的，並讓你知道，thnx。 – Oleg 2011-12-28 21:40:43

調用dialog()

實例之前將數據加載到您的$("<div></div>")容器：

var $dialogContent = $("<div></div>"); 

$dialogContent.load("some href", function() { 
    // Initialize dialog in callback after the data has been loaded. 
    $dialogContent.dialog(options); 
});

來源

2011-12-28 21:20:24

我只加載jPlayer到對話框。 – Oleg 2011-12-28 22:11:14

如何動態更改模態對話框的大小？

回答

相關問題