全国1000万5人のみなさま。お待たせいたしております。
Vaxだょ。
季節は10月だというのになかなか秋が深まっていかない謎。
毎日おでんと鍋の素敵ローテーションに移行させてくれない。。。
この時期のデートと言えばおでんと鍋しかないはずなのに！
これが噂の異常気象なのか。
よし、
せっかくなので今日は異常気象というものについて調べるふりをします(^ω^)
それではタイトルの件。
モーダルウインドウを作ってみたいと思います。
モーダルウインドウとは
エフのメンバーページなんかでもやってるアレです。
⇓
では
js
jQuery(function($){
//リスト選択時に発動
$('.img-list li').click(function(){
var img_src = $(this).find('img').attr('src');
//overlay 中央寄せ
var s_position = $(window).scrollTop();
var h_html = $('body').outerHeight();
var h_window = $(window).height();
var w_width = $(window).width();
var w_overlay_box = $('#overlay_box').width();
//window高さ調整
if ( s_position == 0 ) {
s_position= '30%';
} else {
s_position= s_position + 'px';
}
if ( h_window > h_html ) {
var height = h_window;
} else {
var height = h_html;
}
$('#overlay').css({'width': w_width + 'px','height': height + 'px'},1000).fadeIn();
$('#overlay_box').css({'top': s_position,'left': ((w_width - w_overlay_box)/2)+ 'px'}).fadeIn();
$('#overlay img').attr({'src': img_src});
});
//外枠判定
var flag = false;
$('#overlay_box').hover(function(){
flag = true;
},function(){
flag = false;
});
//外枠クリック時
$('#overlay').click(function(){
if( flag == false ){
$('#overlay').fadeOut();
}
});
});
html
<ul class="img-list">
<li><img src="images/sam01.jpg" alt="" /></li>
<li><img src="images/sam02.jpg" alt="" /></li>
<li><img src="images/sam03.jpg" alt="" /></li>
</ul>
<div id="overlay">
<div>
<p id="lightbox_close"><span>×</span></p>
<img src="" width="500" />
</div>
</div>
css
body,html{ margin:0; padding: 0;}
ul { width: 300px; margin:100px auto; padding:0;; }
li { list-style:none; margin-bottom: 10px;}
#overlay {
display:none;
background: rgba(0,0,0,0.8);
position:absolute;
top:0;
z-index:9999;
}
#overlay_box {
position:absolute;
width: 500px;
}
demo
まとめ
これにページャーなんかも付けてあげるとより親切ですね。
そのちょっとした気遣いが気になるあの子にも伝わればきっといいことがあることでしょう。
きっとそうだよ！！
。。。
今日は かにを食べる予感がします。(^^)
