ایجاد پنجره پاپ آپ با استفاده از jQuery

[mk21 56]

با سلام خدمت کاربران محترم جومینا

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

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

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

کدهای HTML

نمایش دمو

Testing of Modal Window |  Close it


 

کدهای 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();
});
});

دانلود سورس آموزش

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