2016-11-10 8 views
1

私は最後の数時間、反応したボックスを取得しようとしています。彼のコンテンツに合った反応中心のポップアップ

私はそれを動作させる方法を理解できません。

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> 

これはまだ最適化され、Web開発に合計初心者 - 私はありません。

お時間をいただきありがとうございます。

+1

は、あなたはそれが私がポップアップの大きさを意味 – LGSon

+0

をresponsive_することが_getによって何を意味するか、より良い説明する必要があります。 –

+0

私はそれが異なる解像度で異なるサイズを持ってほしいです。例えば、私はそれを基本的に幅の90%にするが、ノートパソコンでは40%にする必要があります。 –

答えて

0

ブートストラップを使用して応答性を追加できます。 HTMLではやや面倒ですが、うまく動作し、使いやすいです。ここでブートストラップをダウンロード:

http://getbootstrap.com/

そして、 "行" divの内側にあなたのポップアップをラップすることにより、それを実装:

<div class="row">

例えば、サイズを指定し、別のdiv:

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

グリッドの異なるサイズおよびレイアウトは、どのように反応するかを柔軟に判断することができます。

現在のブートストラップのグリッドを使用する方法の多くの例を見ることができます:

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

関連する問題