У меня есть ссылка на изображение, которое открывается с помощью 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.