تبلیغات تبلیغات
حراجی دامنه های ویژهمشاهده
آخرین ارسال های تالار مشاهده انجمن
افزونه Coins MarketCap 1 پاسخ 238 بازدید درخواست پلاگین 4 پاسخ 473 بازدید اسکریپت vfm 5 پاسخ 582 بازدید تغییر جهت محتوا در وردپرس 1 پاسخ 248 بازدید افزونه ساخت شماره مجازی 14 پاسخ 1111 بازدید درخواست افزونه 1 پاسخ 455 بازدید بهترین رباط اینستاگرام 0 پاسخ 2 بازدید درخواست قالب با سبک کندو 1 پاسخ 719 بازدید به هم ریختگی سایت بعد از نصب قالب 2 پاسخ 678 بازدید نمایش کد های php 0 پاسخ 432 بازدید
تبلیغات
تبلیغات تبلیغات

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

CSS , آموزش ها , اسکریپت ها , جی کوئری , متفرقه , مقالات,آموزش,ترفند

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

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


توضیحات:
خط اول، لینکی رو با نامی دلخواه و قابل ویرایش برامون میسازه که با کلیک بر روی اون، محتویات  کلاس 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>

کار تمومه…

امیدوارم که آموزش مفید بوده باشه.

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 0 / 5. تعداد رای : 0

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 2 CSS , آموزش ها , اسکریپت ها , جی کوئری , متفرقه , مقالات,آموزش,ترفند
لینک کوتاه مطلب : https://www.20script.ir/?p=7911
کلمات کلیدی پست :
مطالب مرتبط
7,820افکت زیبا بر روی تصاویر به صورت جی کوئری تاریخ : 2014/01/17
9,849افزونه حرفه ای مکعب نمونه کارها تاریخ : 2013/12/15
15,389اسکریپت افکت گذاری بر روی تصاویر Shape Hover تاریخ : 2014/11/24
7,689دکمه مستطیل شبکه های اجتماعی، PSD + HTML / CSS / جی کوئری تاریخ : 2013/11/27
11,160پلاگین جی کوئری ساخت پسورد تصادفی Easy Random Password Generator تاریخ : 2017/10/22
9,016ایجاد انیمیشن متنی با Textillate به صورت جی کوئری تاریخ : 2014/07/13
9,689افکت گذاری بسیار زیبا بر روی تصاویر با جی کوئری تاریخ : 2014/03/8
8,769پلاگین زیبا و متحرک Loader سایت به صورت جی کوئری تاریخ : 2014/03/9
10,131پلاگین لودر جی کوئری Spring Loaders تاریخ : 2016/04/21
6,436پلاگین سنجاق کردت تصاویر با جی کوئری تاریخ : 2016/02/20
7,218منو جی کوئری MetNav 2 به سبک ویندوز مترو تاریخ : 2013/11/21
6,639افکت به تصاویر با استفاده از اسکریپت Picanim تاریخ : 2014/07/27
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
تبلیغات
تبلیغات