Question

我在主页面中有一个模态对话框，然后我将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>

Answer 1

我猜你正在使用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，该ID与点击的按钮相同，并在末尾添加_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()
    });
});

Answer 2

在调用$("<div></div>")

之前将数据加载到dialog()容器中

示例：

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

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

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

2 个答案: