Question

没有响应的模态对话框，没有使用媒体查询或JS是目标（是）。可以做 - 但我已经丢失了更新问题的代码。

你可以在这个小提琴上看到它：

代码：

＆＃13;

.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);
}
.close2 {
  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;
}
.close2:hover {
  background: #00d9ff;
}

＆＃13;

 <a href="#openModal" class="button">Other Information </a>
<div id="openModal" class="modalDialog">
  <div>	<a href="#close" title="Close" class="close2">X</a>
  </div>
</div>

＆＃13;

有关如何解决此问题的任何建议？谢谢！

Answer 1

您可以使用CSS查询指定仅限移动版media，媒体查询仅在CSS范围等特定条件下应用width规则，有关详细信息，请参阅关注article。

在您的情况下，您可以将移动设备的宽度（通常为360px）定位为媒体查询的max-width，如下所示：

＆＃13;

.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);
}
.close2 {
  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;
}
.close2:hover {
  background: #00d9ff;
}
@media (max-width: 360px) {
  .modalDialog > div {
    width: 300px;
  }
}

＆＃13;

<a href="#openModal" class="button">Other Information </a>
<div id="openModal" class="modalDialog">
  <div>	<a href="#close" title="Close" class="close2">X</a>
  </div>
</div>

＆＃13;

Answer 2

您想使用@media queries创建替代效果图。

像：

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

rynave的回答here列出了许多常见的回答;我认为2-4为：

是很常见的

个人电脑/平板电脑，手机
手机，平板电脑，个人电脑
手机，平板电脑，个人电脑，喜欢res 或
观看应用，手机，平板电脑，电脑

不确定他的iPhone是如此有用。

Answer 3

我最终使用了一些基于屏幕尺寸（媒体查询）的自定义CSS类来为不同的屏幕使用不同的东西 - 我最终还是废弃了整个东西，所以这个问题几乎与社区中的任何东西无关，因为我无法删除它，我正在编辑我的答案，以帮助理解我在说什么。

如何使此模态对话框更具响应性？

3 个答案: