如何动态更改模态对话框的大小？

我在主页面有一个模式对话框，然后我添加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

如何动态更改模态对话框的大小？

回答

相关问题