no-img

اِمیلانمایش متون دلخواه به صورت لایت باکس - اِمیلا
0
شنبه 30 شهریور 1398ورودعضویت
اِمیلا
ترفند وب نمایش متون دلخواه به صورت لایت باکس
فرم گزارش را به دقت تکمیل نمایید
از همکاری شما پیشاپیش سپاسگذاریم

ادامه مطلب

انتشار؛ 24 مرداد 1398،
37 روز پیش
نمایش متون دلخواه به صورت لایت باکس
امتیاز 5.00 ( 5 رای )
حمایت از emila.ir

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

منتشر شده در شنبه 30 شهریور 1398 - 37 روز پیش
60
milipinkman
سوال دارم

دراین آموزش از 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>

کار تمام است. نمونه ی کار در qrcode همین مطلب قابل مشاهده است.

منبع : alimir.ir


موضوع : وب/ برچسب : , , / لینک کوتاه : https://emila.ir/?p=17419
designer
نظرات ارسال شده توسط شما، پس از تایید، توسط مدیران سایت منتشر خواهد شد.
نظراتی که به غیر از زبان فارسی، غیر مرتبط با مطلب یا فینگلیش باشد، منتشر نخواهد شد.

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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

Here is a some short information about me: I'm a natural born, writer, designer, forecaster, Interested in PHP programming and activities in the field of digital currency, basically I'm a pretty simple person. I work for Emila.ir for more than 1 years. I am passionate about creating posts and content for emila.ir which I think is Among the best viral persian Websites. I am available at Nearby

ارسال پیامک  -  ارسال ایمیل
IP شما : 35.172.100.232