私は最後の数時間、反応したボックスを取得しようとしています。彼のコンテンツに合った反応中心のポップアップ
私はそれを動作させる方法を理解できません。
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開発に合計初心者 - 私はありません。
お時間をいただきありがとうございます。
は、あなたはそれが私がポップアップの大きさを意味 – LGSon
をresponsive_することが_getによって何を意味するか、より良い説明する必要があります。 –
私はそれが異なる解像度で異なるサイズを持ってほしいです。例えば、私はそれを基本的に幅の90%にするが、ノートパソコンでは40%にする必要があります。 –