2014-01-16 1 views
0

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

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

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

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

EDIT: Я продолжал пытаться решить проблему и документировал некоторые подробности об этом. 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 будет ссылка.

ответ

0

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

0

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

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

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

Смежные вопросы