Question

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

普兰克 - 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;}

JS

$(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();
  })
}

）

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

我面临的问题：

1）当从按钮One打开模态时，模态的宽度将非常低，因为内容不多，只是一个包含少量文本行的小列表。

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

3）模态直接附加到body标签

4）由于模态是通用组件，我只想保持其样式相同，而不管它的调用位置。为了处理不同的情况，模态内的div可以用于不同的宽度。

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

Answer 1

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

类似的东西：

.modal { width:50%; }

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

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

响应式设计问题 - 使用模态弹出窗口

1 个答案: