سلام برنامه | HiProgram

آموزش تصویری ساخت مودال تصاویر با html و css

آموزش تصویری ساخت مودال تصاویر به شما کمک می کند تا بتوانید در پنجره ای تصاویر را نشان دهید

هدف سلام برنامه ایجاد امکانی برای نمایش عکس در اندازه واقعی می باشد

همچنین شما می توانید از مودال تصاویر برای گالری تصاویر هم استفاده کنید

به هرچیز که در صفحه ای مجزا بر روی خود صفحه اصلی باز شود مودال گفته میشود

از مودال ها برای کار های مختلفی استفاده میشود مثل ساخت popup های متنوع

یا حتی صفحات ورود را نیز می توان با مودال ها ساخت یکی از بزرگترین ویژگی مودال ها این است که از رفرش مجدد صفحه جلوگیری می کند

برای ساخت مودال تصاویر ابتدا کد های زیر را بعد تگ body باز قرار دهید

کد زیر برای یک تصویر است به ازای هر تصویر باید کد زیر را وارد کنید

<img src="img_fjords.jpg" id="myImg" alt="Trolltunga" width="300" height="200">
<div id="myModal" class="modal">
<span class="close">&times;</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>

سپس برای استایل دهی و ظاهر سازی کد های زیر را به css خود اضافه کنید

#myImg{
	border-radius:5px;
	cursor:pointer;
	transition:0.3s;
}
#myImg:hover {opacity:0.7;}
.modal{
	display:none;
	position:fixed;
	z-index:1;
	padding-top:50px;
	left:0;
	top:0;
	width:100%;
	height:100%;
	overflow:auto;
	background-color:rgb(0,0,0);
	background-color:rgba(0,0,0,0.9);
}
.modal-content{
	margin:auto;
	display:block;
	width:80%;
	max-width:700px;
	animation-name:zoom;
	animation-duration:0.6s;
}
#caption{
	margin:auto;
	display:block;
	width:80%;
	max-width:700px;
	text-align:center;
	color:#ccc;
	padding:10px 0;
	height:150px;
	animation-name:zoom;
	animation-duration:0.6s;
}
@keyframes zoom{
	from{transform:scale(0)}
	to{transform:scale(1)}
}
.close{
	position:absolute;
	top:15px;
	right:35px;
	color:#f1f1f1;
	font-size:40px;
	font-weight:bold;
	transition:0.3s;
}

و در نهایت برای اجرای مودال کد های جاوا اسکریپت زیر را بعد کد های Html خود مودال قرار دهید

<script>
var modal = document.getElementById('myModal');
var img = document.getElementById('myImg');
var modalImg = document.getElementById('img01');
var captionText = document.getElementById('caption');
img.onclick = function(){
	modal.style.display = "block";
	modalImg.src = this.src;
	captionText.innerHTML = this.alt;
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function(){
	modal.style.display = "none";
}
</script>

کار ساخت مودال تصاویر تمام است.

شما می توانید برای مشاهده جزئیات بیشتر آموزش تصویری را از باکس دانلود موجود در زیر همین پست دانلود نمایید