为所有浏览器调整大小的简单模态容器

Question

我有一个容器，一旦用户选择某个图像，它就会弹出并在页面上显示图像。这在 chrome 中看起来很好（取决于分辨率），但是我在 Opera 和 FF 中被告知它可以切断角落甚至图片顶部的 X（结束符号）。

我想知道是否有办法将叠加层设置为根据打开的图像大小显示，并且无论分辨率如何都居中显示，但不知道该怎么做。

<style>
#basic-modal-content {display:none;}

/* Overlay */
#simplemodal-overlay {background-color:#000;}

/* Container */
#simplemodal-container {height:800px; width:800px; color:#bbb; background-color:black; padding:2px;}
#simplemodal-container .simplemodal-data {padding:8px;}
#simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}

#simplemodal-container a {color:#ddd;}
#simplemodal-container a.modalCloseImg {background:url(../../img/basic/x.png) no-repeat; width:25px; height:29px; 

display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
#simplemodal-container h3 {color:#84b8d9;}

Answer 1

不使用 width 和 height 像素值，您可以使用百分比 (%) 使其响应吗？

还有 autoResize 和 autoPosition 属性可能有助于不同的浏览器和分辨率。

http://www.ericmmartin.com/projects/simplemodal/

为所有浏览器调整大小的简单模态容器

Simplemodal Container resizing for all browsers

html

css

simplemodal