<script>
$(document).ready(function(){
$('#pt1').click(function() {
my_id = $(this).attr("id");
$('#w_'+my_id).css('top','50%');
$('#w_'+my_id).css('left','50%');
$('#w_'+my_id).fadeIn();
});
});
</script>
<div>
<div class="desc">普通にセンターに現れます。</div>
<div id="pt1" class="btn">open</div>
</div>
<div id="w_pt1" class="window">
<div class="demo_body clear">300x200pxのポップアップウィンドウが表示されます。</div>
<div class="demo_foot"><div class=" close btn">close</div></div>
</div>
<script>
$(document).ready(function(){
$('#pt2').click(function() {
my_id = $(this).attr("id");
$('#w_'+my_id).css('top','0%');
$('#w_'+my_id).css('display','block');
$('#w_'+my_id).css('opacity','0.0');
$('#w_'+my_id).css('left','50%');
$('#w_'+my_id).animate({
top: "50%",
opacity: 1.0
}, 1000 ,"easeOutQuart");
});
});
</script>
<div>
<div class="desc">上から降ってきます。</div>
<div id="pt2" class="btn">open</div>
</div>
<div id="w_pt2" class="window">
<div class="demo_body clear">300x200pxのポップアップウィンドウが表示されます。</div>
<div class="demo_foot"><div class="close btn">close</div></div>
</div>
<script>
$(document).ready(function(){
$('#pt3').click(function() {
my_id = $(this).attr("id");
$('#w_'+my_id).css('top','0%');
$('#w_'+my_id).css('display','block');
$('#w_'+my_id).css('opacity','0.0');
$('#w_'+my_id).css('left','50%');
$('#w_'+my_id).animate({
top: "50%",
opacity: 1.0
}, 1000 ,"easeOutElastic");
});
});
</script>
<div>
<div class="desc">勢い良く上から降ってきます。</div>
<div id="pt3" class="btn">open</div>
</div>
<div id="w_pt3" class="window">
<div class="demo_body clear">300x200pxのポップアップウィンドウが表示されます。</div>
<div class="demo_foot"><div class="close btn">close</div></div>
</div>
<style>
#demo_modal {
z-index: 117;
background: #333;
opacity: 0.6;
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left:0px;
}
</style>
<script>
$(document).ready(function(){
$('#pt4').click(function() {
$('#demo_modal').show();
my_id = $(this).attr("id");
$('#w_'+my_id).css('top','50%');
$('#w_'+my_id).css('left','50%');
$('#w_'+my_id).fadeIn();
});
});
$('.close,#demo_modal').click(function() {
$('.window').css('display','none');
$('#demo_modal').css('display','none');
});
</script>
<div>
<div class="desc">ウィンドウ以外がグレーアウトしてそれ以外の操作を抑制します。</div>
<div id="pt4" class="btn">open</div>
</div>
<div id="w_pt4" class="window">
<div class="demo_body clear">300x200pxのポップアップウィンドウが表示されます。</div>
<div class="demo_foot"><div class=" close btn">close</div></div>
</div>
<div id="demo_modal">modal</div>
<style>
.window {
z-index: 200;
position: fixed;
display: none;
top:0%;
left:0%;
background-color: #CCF;
height:180px;
width:280px;
padding:10px 0;
margin-top:-100px;
margin-left:-150px;
box-shadow: 1px 1px 10px rgba(0,0,0,0.4);
-moz-box-shadow: 1px 1px 10px rgba(0,0,0,0.4);/* Firefox */
-webkit-box-shadow: 1px 1px 10px rgba(0,0,0,0.4);/* Safari,Google Chrome */
border-radius: 5px; /* CSS3 */
-moz-border-radius: 5px; /* Firefox */
-webkit-border-radius: 5px; /* Safari,Google Chrome */
}
.window .demo_body{
padding:0 10px;
height:140px;
}
.window .demo_foot{
height:40px;
}
</style>
<script type="text/javascript" src="/js/jquery/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="/js/jquery/plugins/jquery.easing.1.3.js"></script>
<script>
$(document).ready(function(){
$('.window').css('display','none');
$('.close,#demo_modal').click(function() {
$('.window').css('display','none');
$('#demo_modal').css('display','none');
});
});
</script>