以响应为中心的弹出窗口适合他的内容

我试图在过去的几个小时内获得一个以中心响应的框并自动收缩到他的内容。以响应为中心的弹出窗口适合他的内容

我不知道如何让它工作。

我使用这个：

display: inline-block;

这样我得到它适合他的内容，我对准我的弹出与中心：

text-align: center;

但我想不出如何让它响应。

编辑：

对不起，该代码已遗失！这就是：

<!doctype html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <style type="text/css"> 
     .ModalWrapper { 
      width: 100%; 
      height: 100%; 
      position: fixed; 
      text-align: center; 
     } 
     .ModalPopup { 
      background: #ffffff; 
      border-radius: 5px; 
      display: inline-block; 
      border: solid thin #19b4b5; 
     } 
     .ModalTop { 
      text-align: center !important; 
      width: 100%; 
      height: 30%; 
      min-height: 30%; 
      padding-top: 5%; 
      padding-bottom: 5%; 
      top: 0px; 
      left: 0px; 
      background-color: #19b4b5; 
     } 
     .ModalContent { 
      display: inline-block; 
      margin: 10px; 
     } 
    </style> 
</head> 

<body> 
    <div id="fb-root"></div> 
    <script language="javascript" type="text/javascript"> 
     (function(d, s, id) { 
      var js, fjs = d.getElementsByTagName(s)[0]; 
      if (d.getElementById(id)) return; 
      js = d.createElement(s); 
      js.id = id; 
      js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.8"; 
      fjs.parentNode.insertBefore(js, fjs); 
     }(document, 'script', 'facebook-jssdk')); 
    </script> 
    <div class="ModalWrapper"> 
     <div class="ModalPopup"> 
      <div class="ModalTop">Your Post</div> 
      <div class="ModalContent"> 
       <div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-show-text="true"> 
        <blockquote cite="https://www.facebook.com/20531316728/posts/10154009990506729/" class="fb-xfbml-parse-ignore"></blockquote> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 

</html>

，这还不是最优化和I'm总新手到Web开发。

非常感谢您的时间和帮助！

来源

2016-11-10 Selfster

你需要更好地解释你的_GET是什么意思它被responsive_ – LGSon

我的意思是弹出窗口的大小。 – 2016-11-10 19:16:09

我希望它具有不同分辨率的不同尺寸。例如，在电话上，我希望它基本上是宽度的90％，但在笔记本电脑上，例如它应该是40％。 – 2016-11-10 19:18:26

您可以使用Bootstrap添加响应。这对于HTML来说有点麻烦，但它运行良好并易于使用。点击此处下载引导：

http://getbootstrap.com/

然后通过包装你弹出一个 “行” 的div内实现：

<div class="row">

，另一个DIV指定大小，例如：

<div class="col-md-4">

不同尺寸和布局的网格将允许您灵活地确定您希望它的响应程度。

你可以看到如何在这里使用引导的网格的例子很多：

http://getbootstrap.com/examples/grid/

来源

2016-11-10 20:43:50 freginold

以响应为中心的弹出窗口适合他的内容

回答

相关问题