nyroModal根据页面大小而不是浏览器大小调整大小

时间:2014-01-16 08:19:37

标签: javascript jquery html css nyromodal

我有一个指向用nyroModal打开的图片的链接。除了将Modal窗口放置在页面中间而不是浏览器窗口中间的事实外,一切都很有效。这使得只有图像的上半部分才可见。我应该注意到图像非常大,我只是希望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 个答案:

答案 0 :(得分:0)

我解决这个问题的方式结果非常简单。我停止使用nyroModal,而是使用Shadowbox。

答案 1 :(得分:0)

出现同样的问题,我的解决方案是使用ColorBox

我需要一些可用于链接的东西,每个链接都有自己的URL,模态内容是位于网址的页面。

使用Colorbox,很容易。