nyroModal изменяет размеры в зависимости от размера страницы, а не от размера браузера

У меня есть ссылка на изображение, которое открывается с nyroModal. Все прекрасно работает, за исключением того факта, что модальное окно находится в середине страницы, а не в середине окна браузера. Это позволяет видеть только верхнюю часть изображения. Я должен отметить, что изображение довольно большое, я просто ожидаю, что nyroModal изменит размер изображения в зависимости от размера браузера.

Вот скриншот проблемы: http://imgur.com/TFDsujI

Скриншот того, где он работает лучше, но все еще имеет проблему: http://imgur.com/q1mTkKL

Есть ли способ сделать так, чтобы nyroModal размещал окно и изменял его размеры в зависимости от размеров окна браузера, а не от размера страницы?

РЕДАКТИРОВАТЬ: Я продолжал пытаться исправить проблему, и задокументировал некоторые подробности об этом. 1. Эта проблема существует только в Firefox и Chrome. Последняя версия IE не имеет абсолютно никаких проблем. 2. Модальное окно, кажется, открывается ровно на 50% от общей высоты страницы. Это означает, что если страница достаточно длинная, модальное окно будет полностью вне порта просмотра. 3. Окно открывается в одном и том же месте независимо от размера изображения или если в нем вообще нет содержимого.

Я написал разработчику nyroModal по электронной почте в качестве последней попытки и не получил никакого ответа.

Вот код, в котором я использую nyroModal:

<div class="segment" 
onmouseover="document.getElementById('hypocricy').style.display = 'block';"
onmouseout="document.getElementById('hypocricy').style.display = 'none';">
    <div id="hypocricy" style="display:none;">
        <div id="thumbDescription">
        <h2>Hypocricy Sculpture</h2>
        <div class="thumbDescriptionLinks">
            <div class="thumbDescriptionLinkBox">
            <a href="projects/hypocricy/hypocricy1.jpg" class="nyroModal" rel="gal-hypocricy">zoom</a>
            <a href="zoom-images/hypocricy2.jpg" style="display:none;" class="nyroModal" rel="gal-hypocricy" ></a>
            <a href="zoom-images/hypocricy3.jpg" style="display:none;" class="nyroModal" rel="gal-hypocricy" ></a>
            </div>
            <div class="thumbDescriptionLinkBox"><a href="hypocricy-process.html">process</a></div>
        </div>
        <p>A sculpture of two intersecting heads made up of layers of bass wood.<br/><br/>
        For this, I cut many evenly spaced slices out of a 3d head model. Importing the top view of these cross sections into Illustrator allowed me to cut them out of a sheet of bass wood via laser cutter. The slices were then assembled into two separate heads using circular spacers between each slice.</p>
        </div>
    </div>
    <img src="work/school-thumbs/hypocricy.jpg" />
</div>

В основном это квадратный div с другим квадратным div сверху, который скрыт. Когда вы наводите курсор мыши на нижний элемент div, скрытый элемент div становится видимым, и внутри появляется ссылка на изображение nyroModal.

Источник

2 ответа

С той же проблемой, мое решение было использовать ColorBox

Мне нужно что-то, что может быть использовано в ссылках, каждая из которых имеет свой собственный URL, модальное содержимое - страница, расположенная в URL.

С Colorbox это было легко.

Источник

То, как я решил эту проблему, оказалось довольно простым. Я перестал использовать nyroModal и вместо этого использую Shadowbox.

Источник
Другие вопросы по тегам