Как динамически изменить размер модального диалога? - PullRequest
Новая
       11

Как динамически изменить размер модального диалога?

1 голос
/ 29 декабря 2011

У меня есть модальное диалоговое окно на главной странице, затем я добавляю 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>

Ответы [ 2 ]

3 голосов
/ 29 декабря 2011

Я предполагаю, что вы используете диалоговый виджет 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')

, который даст диалогу идентификатор, совпадающий с кнопкой, нажатой для создания его с добавлением _dialog в конце.

UPDATE

Если вы хотите сделать это с помощью JavaScript (скажем, после нажатия на ссылку), тогда вы можете использовать функцию .css() jQuery, чтобы при необходимости изменить размеры элемента: 

$('#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()
    });
});
1 голос
/ 29 декабря 2011

Загрузите данные в ваш $("<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);
});
...