定番
新着
履歴

jQuery モーダルウィンドウのサンプル

共通コード
以下のサンプルは共通のコードがあります。
サンプル
コード
普通にセンターに現れます。
open
300x200pxのポップアップウィンドウが表示されます。
close
サンプル
コード
上から降ってきます。
open
300x200pxのポップアップウィンドウが表示されます。
close
サンプル
コード
勢い良く上から降ってきます。
open
300x200pxのポップアップウィンドウが表示されます。
close
サンプル
コード
ウィンドウ以外がグレーアウトしてそれ以外の操作を抑制します。
open
300x200pxのポップアップウィンドウが表示されます。
close
modal
© 2024 kipure
Top



<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>