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



我有一个指向用nyroModal打开的图像的链接。除了模态窗口被放置在页面的中间而不是浏览器窗口的中间之外,一切都很好。这使得只有图像的上半部分左右可见。我应该注意的是,图像相当大,我只是希望nyroModal根据浏览器大小调整图像的大小。

以下是问题的屏幕截图:https://i.stack.imgur.com/Vn5mI.jpg

屏幕截图显示它在哪里工作得更好,但仍然存在问题:https://i.stack.imgur.com/JFXv3.jpg

有没有什么方法可以让nyroModal放置窗口,并根据浏览器窗口的尺寸(而不是页面大小)调整其大小?

编辑:我一直在努力解决这个问题,并记录了更多关于它的细节。这个问题只存在于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图像的链接。

我解决这个问题的方法非常简单。我不再使用nyroModal,而是使用Shadowbox。

对于同样的问题,我的解决方案是使用ColorBox

我需要一些可以在每个链接上使用的东西,每个链接都有自己的url,模式内容是位于url的页面。

有了Colorbox,这很容易。

最新更新