jquery.simplemodal-1.3.3.js: абсолютное позиционирование (по сравнению с фиксированным)

Я использую прекрасный "simplemodal" jQuery-плагин Эрика Мартина. Он прекрасно работает и рекомендую его всем, кто ищет легкое решение для модальных диалогов на основе jQuery.

Тем не менее, у меня есть особенно длинный контент, который «должен» отображаться как модальный. По умолчанию элемент контейнера использует overflow:auto для обработки содержимого, которое слишком длинное и не помещается в окне браузера. В большинстве случаев это хорошо работает, но в этом случае я бы хотел, чтобы диалог оставался на полную высоту и прокручивался вместе с остальной частью страницы (позиционирование «абсолютное» вместо «фиксированное»). Я могу заставить это работать довольно легко, изменив любую ссылку position: 'fixed' в источнике на position: 'absolute', но это отстой, поскольку это означает, что ВСЕ мои модальные окна будут отображаться Сюда...

У кого-нибудь есть мысли о том, как сделать эту работу изящной?


person droo    schedule 26.01.2010    source источник


Ответы (5)


Похоже, вы не возражаете против адаптации источника к вашим конкретным потребностям... поэтому я бы рекомендовал переработать его, чтобы вы могли предоставлять свойства позиционирования и переполнения через объект параметров.

person prodigitalson    schedule 26.01.2010
comment
Да, к сожалению, это вывод, к которому я пришел... изменение исходного кода Эрика, чтобы можно было указать позиционирование с помощью дополнительной опции. Спасибо за ваш вклад / отзыв! - person droo; 28.01.2010

попробуйте добавить position:absolute к фактическому модальному вызову для этой конкретной области div

как ниже

$("#somebutton").click(функция() {

    $('#my-modal-content').modal({
        position:absolute
    });
});

У меня была та же проблема, что и у вас, но мне нужна коробка другого размера для разных кнопок/функций, и вот как я ее решил. Удачи!

person sdmiller    schedule 26.01.2010
comment
@myself: если, конечно, это уже не предоставлено, как предлагает sdmiller выше :-) в этом случае нет необходимости переделывать исходный код. - person prodigitalson; 27.01.2010
comment
Добавление position: "absolute" к модальному вызову, к сожалению, вообще ничего не дает... - person droo; 28.01.2010
comment
Это форма, которую я использовал для переопределения CSS по умолчанию // Изменить минимальную высоту и ширину $(#sample).modal({ minHeight:400, minWidth: 600 }); этот пример / Вручную установить позицию, используя проценты $(#sample).modal({position: [50%,50%]}); Я нашла их на его странице. вы можете попробовать position:[absolute] - person sdmiller; 28.01.2010
comment
Похоже, он привык к типам позиционирования........................// Вручную устанавливаем позицию $(#sample).modal({position: [ 10,10]}); ...................................... и // Вручную установить позицию, используя проценты $(#sample).modal({position: [50%,50%]}); ................................................. я заставил оба работать над моей программой ... не мог заставить работать абсолютно .... хммм - person sdmiller; 28.01.2010

Вот что я делаю:

jQuery('#MyModal').modal({
    //options
});
jQuery('#MyModal').parents('.simplemodal-container').css('position', 'absolute');
person Mikey G    schedule 20.09.2011
comment
Спасибо за это! Вы также можете установить объявление как опцию только для этого конкретного модального окна, установив onOpen: function (dialog) {dialog.container.css ('position','absolute');}. Сделав это, вы точно не повлияете ни на что другое. - person David; 10.10.2012

Просто есть полоса прокрутки в самом диалоге.

person Thom Smith    schedule 26.01.2010

Вам придется значительно изменить код, особенно код, который имеет дело с IE (в основном IE6).

Простое изменение абсолютной позиции сначала будет работать для определенных браузеров, но некоторые браузеры или изменение размера страницы (в любом браузере) вернутся к фиксированной позиции.

person Eric Martin    schedule 13.02.2010