no-img
اِمیلا

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

بروزرسانی؛
28 فوریه 2020
کد نویسی

دراین آموزش از emila.ir سعی داریم که با استفاده از جی کوئری عناصری شامل متون دلخواه یا تصاویر را به صورت لایت باکس به نمایش در آوریم.

در اولین قدم کد زیر را در یک جای مناسب قرار دهید، این قطعه کد، پایه ی اصلی کار ماست و با پاس دادن کلاس های آن به کدهای جی کوئری و سی اس اس ای که در پایین خواهید دید، میتوانید هر متن دلخواهی را به صورت لایت باکس و به شکلی بسیار زیبا به نمایش در اورید.

پیشنمایش

توضیحات:

خط اول، لینکی را با نامی دلخواه و قابل ویرایش برای ما میسازد که با کلیک بر روی ان، محتویات کلاس box که شامل متنی دلخواه است به نمایش در می آید.

* توجه : در کلاس box کدی هم وجود دارد که به وسیله ان (با دخالت کدهای jQuery  و css) می توانیم تصویر یک ضربدر را جهت زیبایی بیشتر در گوشه بالای سمت راست به نمایش در اوریم که با کلیک بر روی ان، باکس حاوی متون ما بسته خواهد شد.

برای دانلود عکس کوچک ضربدر کلیک کنید.

* توجه : حتما پس از آپلود تصویر بالا، به آدرس فراخوانی ان در کد مربوطه، دقت داشته باشید.

کلاس backdrop هم با کمک جی کوئری تصویر پس زمینه را تیره رنگ می کند.

<a href="#" class="lightbox">نمایش متن</a>
<div class="backdrop"></div>
<div class="box">	<a href="#" class="close"><img src="<?php bloginfo('template_directory'); ?>/images/close_pop.png" class="btn_close" title="پنجره را ببند" alt="Close" /></a>
سلام این یک متن آزمایشی برای امتحان لایت باکس است.</div>

پس از انجام مرحله قبل، نوبت زیبا سازیت، پس به شیوه نامه (style.css) قالبتان بروید و کد زیر در آخر کدهای موجود در انجا قرار دهید.

.backdrop {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background:#000;
	opacity: .0;
	filter:alpha(opacity=0);
	z-index:50;
	display:none;
}
.box {
	position:absolute;
	top:20%;
	left:30%;
	width:500px;
	height:300px;
	background:#ffffff;
	z-index:51;
	padding:10px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow:0px 0px 5px #444444;
	-webkit-box-shadow:0px 0px 5px #444444;
	box-shadow:0px 0px 5px #444444;
	display:none;
}
.close {
	float:right;
	margin-right:2px;
	cursor:pointer;
}

اکنون نوبت به آخرین مرحله است، یعنی استفاده از کدهای جی کوئری.
همانطور که می دانید ابتدا باید کتابخونه جی کوئری را در قالبمان فراخوانی کنیم.
پس کد زیر را بین دو تگ head در سربرگ (header.php) قرار دهید.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

بعد از ان هم، قطعه کد جی کوئری زیر را که شامل کلاس های کدهای خطوط اول مان را در همون قسمتی که فراخوانی کتابخونه جی کوئری را انجام داده اید، قرار دهید.

اگر خواستید از ازدحام کدها در سربرگ جلوگیری کنید، راه بهتری هم وجود دارد و ان هم این است که کد زیر را با فرمت js در قالبتان ذخیره و سپس در سربرگ فراخوانی کنید.

<script type="text/javascript">
			$(document).ready(function(){
				$('.lightbox').click(function(){
					$('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
					$('.box').animate({'opacity':'1.00'}, 300, 'linear');
					$('.backdrop, .box').css('display', 'block');
				});
				$('.close').click(function(){
					close_box();
				});
				$('.backdrop').click(function(){
					close_box();
				});
			});
			function close_box()
			{
				$('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
					$('.backdrop, .box').css('display', 'none');
				});
			}
</script>

[codepen_embed height=”265″ theme_id=”light” slug_hash=”KKpmoYX” default_tab=”html,result” user=”milipinkman”]See the Pen lightbox text by milad (@milipinkman) on CodePen.[/codepen_embed]

لینک کوتاه : https://emila.ir/?p=17419
سلام علیکم!
5
فرم گزارش را به دقت تکمیل نمایید...
از همکاری شما پیشاپیش سپاسگذاریم