Take a fresh look at your lifestyle.

کد لایت باکس برای وبلاگ و وبسایت (آموزش بهمراه کد لایت باکس)

برای قرار دادن لایت باکس پاپ آپ کافییست مراحل زیر را انجام دهید :

اگر وبلاگ یا سایت شما کد css و html جدا داشته باشد به ترتیب زیر مراحل را انجام دهید .

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


#fade{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #000;
z-index:1001;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
}
#light{
display: none;
position: absolute;
top: 5%;
left: 45%;
width: 640px;
height: 453px;
margin-left: -250px;
margin-top: 100px;
background: #CCC;
z-index:1002;
overflow:visible;
}

در مرحاه بعد کد اسکریپت را در داخل تگ هد <head> کپی کنید .

<script>
window
.document.onkeydown = function (e)
{
if (!e){
e
= event;
}
if (e.keyCode == 27){
lightbox_close
();
}
}
function lightbox_open(){
window
.scrollTo(0,0);
document
.getElementById('light').style.display='block';
document
.getElementById('fade').style.display='block';
}
function lightbox_close(){
document
.getElementById('light').style.display='none';
document
.getElementById('fade').style.display='none';
}
</script>

در مرحله سوم تگ <body> خود را تغییر دهید به <body onload="lightbox_open()";>

و در مرحله آخر در کد زیر را در زیر تگ بالا کپی کنید .

<div class="light" onClick="lightbox_close();" id="light"><img src="https://minevisam.ir/wp-content/uploads/2019/09/imam-rezaa.jpg" width="640px" height="453px"></div>
<div id="fade" onClick="lightbox_close();"></div>

الان کد شما باید کار کند .

 

اگر کد قالب وبلاگ شما یک صفحه ای بود کد زیر را در قسمت قالب وبلاگ خود بر روی تگ <body> کپی کنید :

<Style>
#fade{ody
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #000;
z-index:1001;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
}
#light{
display: none;
position: absolute;
top: 5%;
left: 45%;
width: 640px;
height: 453px;
margin-left: -250px;
margin-top: 100px;                 
background: #CCC;
z-index:1002;
overflow:visible;
}
</style>
<script>
window.document.onkeydown = function (e)
{
if (!e){
    e = event;
}
if (e.keyCode == 27){
    lightbox_close();
}
}
function lightbox_open(){
window.scrollTo(0,0);
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';  
}
function lightbox_close(){
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}
</script>
<head>
<body onload="lightbox_open()";>
<div class="light" onClick="lightbox_close();" id="light"><img src="your_img.jpg"></div>
<div id="fade" onClick="lightbox_close();"></div>


مگ تک

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

آدرس ایمیل شما منتشر نخواهد شد.