CSSの書き方について
Jquery のポップアッププラグインであるPopboxを使おうとしています。
http://gristmill.github.io/jquery-popbox/
実装は出来たのですが、下記の改造で戸惑っています。
●デフォルトでは、クリックしたボタンから吹き出しの形で、ボタンより下にポップアップが表示されます。
●当方の希望
クリックしたボタンの場所にかかわらず、スマートフォンの表示枠の一番上から表示させたいです。
CSSのどこを弄ると当方の希望の状況になるでしょうか?
よろしくお願いいたします。
<style>
.popbox {
margin:0px auto;
text-align:center;
position:relative;
}
.collapse { position:static; }
.open {
background:#DDD;
border:solid 1px #FFF;
border-radius:5px;
box-shadow: 0px 0px 5px #CCC;
background:-webkit-gradient(linear,left top,left bottom,from(#f4f4f4),to(#e8e8e8));
background:-moz-linear-gradient(top,#f4f4f4,#e8e8e8);
background:linear-gradient(top,#f4f4f4,#e8e8e8);
padding:8px;
}
.box {
width:280px;
display:block;
display:none;
background:#FFF;
border:solid 1px #BBBBBB;
border-radius:5px;
box-shadow:0px 0px 15px #999;
position:absolute;
}
.box a.close {
color:red;
font-size:12px;
font-family:arial;
text-decoration:underline;
}
.arrow {
width: 0;
height: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-bottom: 11px solid #FFF;
position:absolute;
left:1px;
top:-10px;
z-index:1001;
}
.arrow-border {
width: 0;
height: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-bottom: 11px solid #BBBBBB;
position:absolute;
top:-12px;
z-index:1000;
}
</style>
<script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
$('.popbox').popbox();
});
</script>
<h1>PopBox</h1>
<div class='popbox'>
<a class='open' href='#'>
<img src='images/plus.png' style='width:14px;position:relative;'> Click Here!
</a>
<div class='collapse'>
<div class='box'>
<div class='arrow'></div>
<div class='arrow-border'></div>
表示内容
</div>
</div>
</div>
お礼
すみません。今度からちゃんと調べます。 ご回答ありがとうございました。