آموزش ساخت پنجره پاپ آپ با استفاده از jQuery

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

مشاهده دمو پنجره مودال پاپ آپ دانلود سورس کامل پاپ آپ

 

● پسورد : www.websiteha.com

چگونگی انجام کار و نحوه نمایش محتوا در پاپ آپ به شرح زیر است:

  • محتوایی که می خواهیم داخل پاپ آپ نمایش داده شود، داخل یک عنصر div که دارای یک خصیصه id است قرار میگیرند.
  • برای لینکی که می خواهیم با کلیک روی آن پاپ آپ نشان داده شود، خصیصه Name را برابر با modal قرار میدهیم. همچنین خصیصه href این لینک را برابر با id عنصر div که محتوا در آن قرار گرفته است، قرار می دهیم. کد جاوااسکریپت نوشته شده، در داخل صفحه به دنبال لینکی که دارای خصیصه name="modal" است، جستجو میکند و سپس عنصری را که در خصیصه href به آن اشاره شده، به عنوان پاپ آپ نمایش می دهد.
  • یک عنصر div دیگر به عنوان ماسک دودی رنگ در زیر پاپ آپ کل صفحه را می پوشاند.

کدهای HTML


<a name="modal" href="#dialog" >www.websiteha.com</a>
<div id="boxes">
<div id="dialog" class="window"><strong>Testing of Modal Window</strong> |  <a class="close" href="#">Close it</a></div>

<div id="mask"> </div>
</div>

کدهای CSS

/* مقدار z-index باید کمتر از #boxes .window باشد */
#mask {
  position:absolute;
  z-index:9000;
  background-color:#000;
  display:none;
  top:0px;
  left:0px
  
}
  
#boxes .window {
  position:fixed;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}

/* ظاهر پنجره پاپ را توسط این بلاک تغیر داده و سفارشی کنید */
#boxes #dialog {
  width:375px; 
  height:203px;  
  background:#fff
}

کدهای جاوااسکریپت

$(document).ready(function() {	

	//انتخاب لینک با نام مودال
	$('a[name=modal]').click(function(e) {
		//لغو حالت پیش فرض عملکرد لینک
		e.preventDefault();
		//دریافت آیدی عنصر پاپ آپ 
		var id = $(this).attr('href');
	
		// دریافت طول و عرض صفحه نمایش
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
	
		// تنظیم طول و عرض ماسک به اندازه صفحه نمایش 
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		
		//اعمال افکت نمایش تدریجی بر روی ماسک 		
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.8);	
	
		// دریافت طول و عرض پنجره مرورگر
		var winH = $(window).height();
		var winW = $(window).width();
              
		// تنظیم محل باز شدن پاپ آپ در مرکز صفحه
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
	
		//اعمال افکت نمایش تدریجی پاپ آپ 
		$(id).fadeIn(2000); 	
	});
	
	//رویداد دکمه بستن پاپ آپ
	$('.window .close').click(function (e) {
		// لغو حالت پیش فرض عملکرد لینک
		e.preventDefault();
		$('#mask, .window').hide();
	});		
	
	//بسته شدن پاپ آپ با کلیک روی ماسک اطراف آن
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});
});

فراموش نکنید کتابخانه جی کوئری را به صفحه وب خود اضافه کنید.

نظرات (37) -

  • فرشید شاهمرادی

    12/20/1390 10:41:36 ق.ظ | پاسخ به این نظر

    سلام دمتون گرم
    چطور میشه واسه خارج شدن از این هم افکت داد یا همون FadeOut؟

    • Admin

      12/20/1390 11:04:32 ق.ظ | پاسخ به این نظر

      سلام
      برای اینکار در بخش رویداد دکمه بستن پاپ آپ، به جای تابع hide بنویسید fadeOut . همین کار رو برای آخرین رویداد هم انجام بدید. در کل هر سه تابع hide در خطوط پایانی کدهای جاوااسکریپت به fadeOut تبدیل شود.

  • bahar

    12/20/1390 11:07:06 ب.ظ | پاسخ به این نظر

    سلام حامد جان.ممنون از آموزش بی نظیرت!فقط چه طور میشه چند تا پاپ آپ متفاوت داشت ؟؟؟یعنی به ازای هر لینک 1 پاپ آپ توی همون قسمت صفحه.آیا شدنی هستش؟؟؟

    • Admin

      12/21/1390 09:01:44 ق.ظ | پاسخ به این نظر

      سلام بهار جان
      برای اینکه چندتا پاپ آپ داشته باشید، کافیه به هر لینکی که می خواهید پاپ رو باز کنه خصیصه name=modal رو اضافه کنید و در خصیصه href اون لینک هم آیدی عنصر divی که می خواهید به عنوان پاپ آپ باز بشه رو  بنویسید.

      • bahar

        12/21/1390 01:58:56 ب.ظ | پاسخ به این نظر

        ممنون حامد جان.متوجه شدم والان هم درست کردم.فقط یک سوال دیگه من به ازای هر لینک یک #boxes windows و یک #boxes dialog جدید تعریف کردم آیا این کار درسته یا نه؟

  • queen

    12/21/1390 12:54:12 ق.ظ | پاسخ به این نظر

    عالی بود هفته پیش دنبال  ابن موضوع بودم ممنون

  • محمد

    12/24/1390 10:02:56 ب.ظ | پاسخ به این نظر

    با سلام وتشکر فراوان از سایت آموزنده شما
    ببخشید من زیاد jquery اما از پنجره پاپ شما خیلی خوشم امد می تونم بپرسم چطور میشه یک title به این پنجره اظافه کرد
                                                                     با تشکر

    • Admin

      02/03/1392 11:46:49 ق.ظ | پاسخ به این نظر

      به بخش HTML برید و اونجا یک div با استایل تایتل مورد نظرتون در بالاترین بخش طراحی کنید.

  • ali

    01/01/1391 03:17:07 ب.ظ | پاسخ به این نظر

    سلام

    حامد جان یه خواهشی داشتم نمونه کد عکس زیر را

    اگه بتونی لازم داشتم.http://alinl2.persiangig.com/2222.JPG

    متـــــــــشکر

    • Admin

      02/03/1392 11:48:25 ق.ظ | پاسخ به این نظر

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

  • atila

    01/06/1391 05:23:05 ب.ظ | پاسخ به این نظر

    باسلام و خسته نباشید
    بدون مقدمه و بزرگنمایی به شما تبریک میگم که چنین سایت عالی وخوبی که دارید ازاین بابت که هر کسی بنا به معلوماتش میتونه ازسایت شما به نحو احسن استفاده کنه
    ضمنان میخواستم به عرضتان برسونم بخاطر کارم آشنایی خوبی با فتوشاپ دارم ممنون میشم منو راهنمایی کنین که برای طراحی سایت از چه نرم افزاری استفاده کنم ؟

    • Admin

      02/03/1392 11:51:09 ق.ظ | پاسخ به این نظر

      درود
      ضمن سپاس بخاطر نظر لطف شما، طراحی سایت وابسته به هیچ نرم افزاری نیست و میتونید حتی با یک NOTEPAD هم کدهای THML,CSS,JAVASCRIPT و ... رو نوشته و ذخیره کنید. اما برای راحتی میتونید از محیط های dreamweaver , visualstudi و ... استفاده کنید. هرکدوم که راحت ترید...

  • نیما

    01/25/1391 01:39:43 ق.ظ | پاسخ به این نظر

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

    من این پنجره پاپ آپ رو برای وب سایت خودم سفارشی کردم حالا میخوام این پنجره وقتی که کاربری وارد سایتم میشه در یک صفحه جداگانه لود بشه؛ باید چه دستوراتی رو به قالب اصلی سایتم اضافه کنم تا این عملکرد اجرا بشه؟

    • Admin

      02/03/1392 11:55:23 ق.ظ | پاسخ به این نظر

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

  • محسن

    01/29/1391 06:30:18 ب.ظ | پاسخ به این نظر

    سلام.

    من یه فرم ساده "تماس با ما" طراحی کردم.

    میخوام با استفاده از jQuery این فرم رو validation کنم.

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

    ممنون میشم راهنمایی کنید.

    • Admin

      02/03/1392 11:58:03 ق.ظ | پاسخ به این نظر

      سلام
      مبحث validation و اعتبارسنجی گسترده تر از یک کامنت هست، پیشنهاد میکنم برای اعتبارسنجی فرم هاتون از زبان های برنامه نویسی که این کار رو در سطوح بالای زبان براحتی انجام میدن، پیاده کنید. زبان هایی مثل VB، Csharp و ...

  • مهدی

    02/13/1391 08:13:20 ب.ظ | پاسخ به این نظر

    سلام
    ایول داری خیلی گشتم تا این کد رو پیدا کنم
    ممنون
    آقا من توی سایتم استفاده کردم سمت چپ روی دکمه نقشه که بزنی اجرا میشه
    خیلی خوب شد
    ممنون

  • محسن فائضی

    06/01/1391 05:37:15 ب.ظ | پاسخ به این نظر

    سلام عزیز،
    من کل وبتو خوندم... ریزه کاری های بی نظیری یاد گرفتم...
    تو خدایی، تو نا خدایی!!!
    ممنونم...

  • amir

    06/31/1391 08:04:29 ب.ظ | پاسخ به این نظر

    سلام و خسته نباشید ممنون از مطالب خوبتون امیدوارم که همیشه به وب ایران کمک کنید من یه پیشنهاد داشتم میتونید شبیه سایت tutsplus آموزش ها رو بزارید شما که این همه زحمت می کشید گفتم شاید جذابتر بشه البته نمی گم تقلید کنید اما میتونید الهام بگیرید
    شاد باشید

  • حسن

    01/17/1392 12:23:49 ق.ظ | پاسخ به این نظر

    سلام
    دموهای شما مشکل دارد
    این خطا را میدهد :
    500 - Internal server error.

  • امین

    05/04/1393 04:24:35 ب.ظ | پاسخ به این نظر

    سلام، خسته نباشید
    ساییتون واقعاً عالیه. دستتون درد نکنه.

  • ابوالفضل کریمی

    05/21/1393 08:26:38 ب.ظ | پاسخ به این نظر

    فوق العاده بود.
    نمیدونم چه جوری تشکر کنم، واقعا ممنون، کلی دنبالش بودم ...
    :-*

  • علي

    06/09/1393 01:34:54 ب.ظ | پاسخ به این نظر

    باسلام لينك نسخه نمايشي مشكل داره
    500 - Internal server error.
    There is a problem with the resource you are looking for, and it cannot be displayed.

  • اسماعیل ضیایی

    07/12/1393 03:15:17 ب.ظ | پاسخ به این نظر

    با سلام.

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

    ممنون

  • مرکز توزیع شارژ ارزان

    07/19/1393 06:25:51 ب.ظ | پاسخ به این نظر

    بابا من کلا میخوام یه لینک رو طوری کنم که وقتی کلیک میشه روش در پنجره جدید با ابعاد مشخصی باز بشه !
    باید اینهمه کار کنم ؟
    راه راحت تری نیست ؟
    سپاس گذارم

  • arshiya

    08/07/1393 06:56:00 ب.ظ | پاسخ به این نظر

    با سپاس از آموزش شما
    لطفا میشه اون کدهای جاوا اسکریپت مربوط به همین پاپ اپ نوشتین رو را آموزش بدین ,
    من با این کدها تغییرات زیادی ایجاد کردم و تونستم فرم لوگین طراحی اماخود کد ها رو نمی فهمم
    اگه امکانش هست مفهوم کدها رو آموزش بدین
    باتشکر

  • ali.zl

    08/20/1393 08:43:47 ق.ظ | پاسخ به این نظر

    با سلام

    ممنون بابت سایت بسیار عالی و آموزش کاربردی که ارائه دادین

    فقط یه سوال ؛
    اگه بخوام چندتا عکس رو با استفاده از این مودال نمایش بدم چی کار باید بکنم

    به طوری که دکمه بعدی و قبلی داشته باشه

  • سعیده

    09/20/1393 04:51:06 ب.ظ | پاسخ به این نظر

    سلام
    ممنون برای این پست خوبتون اما من زیاد به این چیزا وارد نیستم و میخواستم تو یه سایت word pres یک لینک بذارم که وقتی روی لینک کلیک میکنم این پنجره باز بشه و محتوای مورد نظر منو نشون بده
    این کدهارو تو یک position در قسمت محتوای html  وارد کردم اما کل سایت بهم میریزه

Loading