Question

我使用CSS3创建了一个模态对话框，它完美无缺。但我的网站是响应式的，并且模式必须出现在iframe中的多个项目上（请参阅此处：http://labs.tageswoche.ch/interaktives/filmPortraits/和此处：http://master.tw.felix.sourcefabric.net/de/2014_11/international/652865/Drei-Jahre-B%C3%BCrgerkrieg-und-kein-Ende-in-Sicht.htm）。在iframe中它不起作用，但它在真实站点上按预期工作。

模态对话框在前两张图片上实现。

这里是代码：

.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}

这是我用来实现模态对话框的jsfiddle：

http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/

我想要实现的是模式出现在鼠标点击的位置（或更多或更少），以便在墙壁的最后一个图像上的移动设备上也是如此。现在，模态显示在顶部。我该如何实现呢？我不知道。

Answer 1

我想对你的设计说一点，不要为每个人的模态制作单独的模态窗口htmls，使用一个模态并在点击不同的人时更改其innerhtml，这样你就可以编写更少的代码，更容易维护（如果您对模态添加更改，则在一个位置进行一次更改等）

此外，模态窗口的性质是，它具有半透明背景，模态窗口浮动（不在css上下文中）。

如果您在下面看到这个css位，您会更好地理解：

.modalDialog > div {
width: 600px;
position: relative;
margin: 5% auto;
padding: 5px 20px 13px 20px;
background: #fff;
}

说“保证金：5％自动;”导致这种行为，您需要做的是将此更改为相同的符号，填充设置和图像的每个位置，给它一定的值，即边距：10px 10px的模式窗口，只显示在左上角如果你对鼠标的确切位置不太挑剔，那么窗口等等。

如果你是，那么使用最外层背景div的“onclick”事件，其宽度/高度等于包含的每个人的图像的整体大小，而不是使用事件对象来获取鼠标位置值（阅读此链接{{3 }}）

我没有为你写它，所以你可以自己动手去学习，希望这有帮助！

相对于鼠标位置打开CSS3 / HTML5模式对话框

1 个答案: