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

时间:2017-01-11 21:41:57

标签: html css

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

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

https://jsfiddle.net/4qkonfLk/

代码:



.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;
}

 <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;
&#13;
&#13;

有关如何解决此问题的任何建议?谢谢!

3 个答案:

答案 0 :(得分:1)

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

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

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:1)

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

像:

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
rynave的回答here列出了许多常见的回答;我认为2-4为:

是很常见的
  • 个人电脑/平板电脑,手机
  • 手机,平板电脑,个人电脑
  • 手机,平板电脑,个人电脑,喜欢res 或
  • 观看应用,手机,平板电脑,电脑

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

答案 2 :(得分:0)

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