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

我在主页中有一个模态对话框，然后我将jPlayer添加到该对话框中。一切正常，但我在这个对话框中只看到了播放器的一部分。插入播放机后，如何将对话框大小更改为播放机大小

i、 e.我想将音频或视频播放器插入此对话框，它们有不同的大小

$(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>

$（文档）.ready（函数（）{
$（“#jquery_jplayer_1”）.jplayer({
就绪：函数（）{
$（this）.jPlayer（“setMedia”{
mp3：“media/track.mp3”，
}).jPlayer（“播放”）；//自动播放
},
结束：功能（事件）{
$（this.jPlayer（“play”）；
},
swfPath:“swf”，
提供：“mp3”
})
.bind（$.jPlayer.event.play，function（）{//当前播放时暂停播放器的其他实例
$（this.jPlayer（“pauseOthers”）；
});
});
$.ajaxSetup（{cache:false}）；
$（文档）.ready（函数（）{
$（“.openDialog”）.live（“单击”，函数（e）{
e、 预防默认值（）；
$("")
.addClass（“对话框”）
.attr（“id”，$（此）
.attr（“数据对话框id”））
.附件（“正文”）
.对话({
标题：$（this.attr（“数据对话框标题”），
关闭：函数（）{$（this）.remove（）}，
莫代尔：对
})
.load（this.href）；
});
$（“.close”）.live（“单击”），函数（e）{
e、 预防默认值（）；
$（此）.close（.dialog”）.dialog（“关闭”）；
});
});

我猜您正在使用jQuery UI的对话框小部件。如果是这样，那么您可以通过CSS将元素作为目标（这将比在JavaScript中实现更好的性能）：

如果有多个对话框，则应使上面的CSS选择器更独特：

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

此外，此行应引发一个错误：

.attr("id", $(this)

应该改成这样：

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

这将为对话框提供一个ID，该ID与单击以创建对话框的按钮相同，并将

\u dialog

附加到末尾

更新

如果您确实希望通过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()
    });
});

$（'some link'）.bind（'click'，function（）{
变量$dialog=$（'.ui dialog'）；
$dialog.append（“”）；
$dialog.css({
宽度：$dialog.children（'.audio'）.width（），//请注意，将假定像素，因此无需指定'px'`
高度：$dialog.children（'.audio'）.height（）
});
});

我猜您正在使用jQuery UI的对话框小部件。如果是这样，那么您可以通过CSS将元素作为目标（这将比在JavaScript中实现更好的性能）：

如果有多个对话框，则应使上面的CSS选择器更独特：

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

此外，此行应引发一个错误：

.attr("id", $(this)

应该改成这样：

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

这将为对话框提供一个ID，该ID与单击以创建对话框的按钮相同，并将

\u dialog

附加到末尾

更新

如果您确实希望通过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()
    });
});

$（'some link'）.bind（'click'，function（）{
变量$dialog=$（'.ui dialog'）；
$dialog.append（“”）；
$dialog.css({
宽度：$dialog.children（'.audio'）.width（），//请注意，将假定像素，因此无需指定'px'`
高度：$dialog.children（'.audio'）.height（）
});
});

在调用

对话框（）之前，将数据加载到您的
$（“”）
容器中。

例如：

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

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

var$dialogContent=$（“”）；
$dialogContent.load（“一些href”，函数（）{
//加载数据后，在回调中初始化对话框。
$dialogContent.dialog（选项）；
});

在调用

对话框（）之前，将数据加载到您的
$（“”）
容器中。

例如：

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

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

var$dialogContent=$（“”）；
$dialogContent.load（“一些href”，函数（）{
//加载数据后，在回调中初始化对话框。
$dialogContent.dialog（选项）；
});

但它将是静态值吗？我不认识他们。例如：有文件列表（mp3、mp4）加载到页面，当用户单击文件时，我需要打开对话框并插入音频或视频播放器。在这一点上，我需要改变对话框的大小以适应玩家。@Oleg我更新了我的答案，希望它比上一次的尝试更有帮助。但它将是静态值吗？我不认识他们。例如：有文件列表（mp3、mp4）加载到页面，当用户单击文件时，我需要打开对话框并插入音频或视频播放器。在这一点上，我需要改变对话框的大小以适应玩家。@Oleg我更新了我的答案，希望它比以前的尝试更有帮助。我只将jPlayer加载到对话框中。我只将jPlayer加载到对话框中。