我开发了一个自定义模式弹出窗口，在我的元素中用作通用组件。不同的 content/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();
})
}
)
如上图plunk所示，当点击button one时，弹出框内的内容较少，因此弹出框的尺寸非常小。但是当从另一个按钮调用弹出窗口时，那里有很多内容。 现在，我必须让这项工作主要适用于所有平台——移动设备 (iphone/nexus)、平板电脑 (nexus/ipad/ipadmini) 和桌面浏览器。
我遇到的问题:
1) 当从按钮一打开模态时，模态的宽度会很低，因为内容不多，只有几行文本的小列表。
2) 第二个按钮的模态占据了手机的整个屏幕，因此我想将模态的宽度保持为 100%。但如果我这样做，它也会在平板电脑和桌面上占据全屏，这是不需要的，它在选项卡和桌面上应该只占 50%。而且我还需要确保模态保持与第 1 点或从第一个按钮打开时一样小。
3) modal直接附加到body标签上
4) 由于模态是通用组件，我只想保持它的样式不变，而不管它是从哪里调用的。为了照顾不同的实例，modal 内的 div 可以用于不同的宽度。
因此，考虑到所有 4 点，我无法让它在所有平台上工作，我能够在台式机/平板电脑上完成它，但不能在手机上完成，因为它需要 100% 的屏幕。
最佳答案
您需要研究 CSS 中的媒体查询...
类似于:
.modal { width:50%; }
@media only screen and (max-width: 767px) { .modal { width:100%; }}
这将使 .modal 类在所有设备上为 50%，但在移动设备上为 100%。
关于html - 响应式设计问题 - 带有模式弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26644983/