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

دسته‌ها : آموزش, وردپرس علی میرزائی 21 دیدگاه‌ها

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

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

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

کار تمومه…

امیدوارم که آموزش مفید بوده باشه.
منبع : alimir.ir

 

دیدگاه کاربران در مورد این نوشته

  1. خیلی عالی بود.مرسی

    توسط سارا پاسخ

  2. عالی بود ممنون

    توسط seyed hassan پاسخ

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

    توسط فرهاد پاسخ

  4. آقا علی واقعا ممنونتم

    توسط mohsen پاسخ

  5. سلام
    ممنون جالب بود ولی وقتی تو یه مطلب میخوام چند تا از این لایتباکسها استفاده کنم زمان نمایش همشون رو با هم و روی هم نشون میده . چیکار کنم که درست شه ؟

    توسط سردار پاسخ

  6. سلام .. واقعاً ممنونم ازتون .. کمک بزرگی بهم کردین .. یه دنیا تشکر ♥

    توسط علیرضا پاسخ

    1. قابلی نداشت علیرضا جان {گل}

      توسط علی میرزائی پاسخ

  7. درود بر شما
    مطالب جالبی بود من که استفاده کردم سپاس از زحمات شما

    توسط شهریار پاسخ

  8. با سلام
    من یه لایت باکس متن دارم که وقتی اجراش می کنم
    و سپس توسط موس صفحه اصلی سایت که زیر لایت باکس است رو جابجا می کنم این صفحه لایت باکس هم جا بجا میشه و از صفحه تمایش بیرون میره
    من میخوام در هر صورت در مرکز صفحه نمایش باقی بماند چه ویرایشی انجام بدم؟
    مثل دموهای این سایت:
    http://jschr.github.io/bootstrap-modal
    اگر یکی از دمو ها رو اجرا کنید و صفحه اصلی سایت را بالا یا پایین ببرید لایت باکس میاد و در صفحه نمایش قرار می گیره؟

    توسط داود پاسخ

    1. ویرایش نیست، باید کلی کدنویسی انجام بدید. راحت ترین راه اینه که از همین اسکریپت استفاده کنید.

      توسط علی میرزائی پاسخ

  9. سلام
    ممنون میشم کمکم کنید
    میخواستم بدونم چطوری میشه از دوتا لایت باکس استفاده کرد.مثلا با کلیک بر روی متن اول لایت باکس اول نمایش داده شود و با کلیک بر روی متن دوم لایت باکس دومی نشون داده شه

    توسط محمد پاسخ

    1. سلام، این یک نمونه اسکریپت برای بوت استرپ: (حالا اگه بیشتر بگردی، میتونه نمونه های دیگه ای رو هم پیدا کنی.)
      http://tiny.alimir.ir/lL

      توسط علی میرزائی پاسخ

  10. سلام
    جالب بود مرسی
    فقط اگر میشه بگید چطوری این لایت باکس رو طوری درست کرد که هنگام ورد نمایش داده بشه و فقط یک با برای هر کاربری نمایش داده بشه

    توسط face-love پاسخ

  11. سلام ، من توی سایتم گداشتم : kiangfx.ir
    اما نشون نمیده . خودتون ببینین اگر میشه . توی سایت که رفتید وسط صفحه 5 تا آیکوتو روی نوشته هدایای تبلیغاتی کلیک کنین و ببینین چ اتفاقی میفته ! نمیشه ! مرسی اگر کمکم کنین

    توسط کیان پاسخ

    1. لطفا جوابمو بدید ، لازمش دارم ! ممنون میشم !

      توسط کیان پاسخ

      1. سلام،
        لینک هدیه رو که سلکتورش روی لایت باکس ست شده بود، به درستی باز کرد. الآن دقیقا مشکل شما در کدوم قسمت؟!؟

        توسط علی میرزائی پاسخ

  12. این جی کوئری چه کارها که نمیکنه.
    جال بود. مرسی

    توسط sam پاسخ

  13. mamnoon doste zahmatkesh va herfei

    توسط nima پاسخ

  14. دوست گرامی من انجام دادم اما نشد .

    توسط saeed پاسخ

  15. حیفم اومد تشکر نکنم

    توسط سراج پاسخ

    1. لطف کردی :)

      توسط علی میرزائی پاسخ

دیدگاه خود را بیان کنید