响应式设计问题 - 带有模式弹出窗口答案

【问题标题】：Responsive design issue - with modal popup响应式设计问题 - 带有模式弹出窗口
【发布时间】：2014-12-26 00:30:21
【问题描述】：

我开发了一个自定义模式弹出窗口，在我的项目中用作通用组件。不同的内容/html在模态框内部传递，从哪里打开。

Plunk - http://plnkr.co/edit/aApQZhgMZJkMAjLtjF5P?p=preview

HTML：

  <body>
    <div>
      <button class="one">One</button>
      <button class="two">Two</button>
    </div>
    <div class="modal">
      <div>Content specific to button here</div>
    </div>
    <div class="backdrop"></div>
  </body>

CSS

button{width:50px; height:20px; margin-right:10px;}
.modal{position:absolute; top:50px; left:50px; height:100px;background:#ededed; display:none;z-index:10;    }
.backdrop{position: fixed; top: 0; left: 0; right: 0; bottom: 0;background: #000; opacity: .5;
  display:none; z-index:9;}

$(document).ready(function(){
  $(".one").on("click",function(){
    $(".modal, .backdrop").show();
    $(".modal div").width(50).html("Content 1 here")
  })

  $(".two").on("click",function(){
    $(".modal, .backdrop").show();
    $(".modal div").width(300).html("Content 2 here")
  })

  $(".backdrop").on("click",function(){
    $(".modal, .backdrop").hide();
  })
}

)

如上面的 plunk 所示，当单击按钮一时，弹出窗口内的内容较少，因此弹出窗口的大小非常小。但是当从另一个按钮调用弹出窗口时，那里有很多内容。现在，我必须在所有平台上进行这项工作 - 移动设备 (iphone/nexus)、平板电脑 (nexus/ipad/ipadmini) 和桌面浏览器。

我面临的问题：

1) 当从按钮一打开模态框时，模态框的宽度会非常低，因为内容不多，只有几行文字的小列表。

2）第二个按钮的模态在手机上占据了整个屏幕，因此我想保持模态的宽度为100％。但是如果我这样做，它也会在平板电脑和桌面上占据全屏，这不是必需的，它应该只占标签和桌面的 50%。而且我还需要确保模式保持与第 1 点或从按钮一打开时一样小。

3) modal直接附加到body标签

4) 由于 modal 是通用组件，我只想保持它的样式不变，而不管它在哪里被调用。并且为了处理不同的实例，模态中的 div 可以用于不同的宽度。

因此，考虑到所有 4 点，我无法让它在所有平台上运行，我能够在台式机/平板电脑上完成它，但不适用于手机，因为它需要 100% 的屏幕。

【问题讨论】：

标签： html css responsive-design adaptive-design

【解决方案1】：

您需要查看 CSS 中的媒体查询...

类似：

.modal { width:50%; }

@media only screen and (max-width: 767px) { .modal { width:100%; }}

这将使.modal 类在所有设备上达到 50%，但在移动设备上达到 100%。

【讨论】：

嘿，我有点意识到，为了我的要求，我必须使用 js，确定浏览器视口，然后做相应的事情。单独的媒体查询无法提供帮助，但无论如何，感谢您的输入。