0

我开发了一个自定义模式弹出窗口，在我的项目中用作通用组件。不同的内容/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;}

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

)

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

我面临的问题：

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

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

3) modal直接附加到body标签

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

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

4

1 回答 1

0

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

就像是：

.modal { width:50%; }

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

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

于 2014-10-30T04:35:33.403 回答