<div id="hideshow" >
	<div id="fade"></div>
 
	<div class="popup_block">
		<div class="popup">
			<a id="aa" href="javascript:hideDiv()">
				<img src="images/close.png" class="cntrl" title="أغلق" />
			</a>
			<h3>عنوان</h3>
			<p>هنا المحتوى او النص</p>
 
		</div>
	</div>
</div>

<a href="#" id="ee">اضغط هنا لإظهار النافذة</a>

/*
	** Fez-Soft
	** 2009
 
*/
body {
	height: 100%;
	margin: 0;
	padding: 40px;
	font:  12px tahoma;
	background: #eee;
	position: relative;
}
 
h1 ,  #ee{
	font:24px "times new roman";
}
img {
	border: none;
}
#hideshow {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
#fade {
	background: #000; 
	position: fixed; 
	width: 100%;
	height: 100%;
	filter:alpha(opacity=80);	/* الشفافية من جيل css3 */
	opacity: .80;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /*--IE 8 شفافية --*/
	left: 0;
	z-index: 10;
}
.popup_block {
	background: #ddd;
	padding: 10px 20px;
	border: 10px solid #fff;
	float: left;
	width: 480px;
	position: fixed;
	top: 20%;
	left: 50%;
	margin: 0 0 0 -250px;
	z-index: 100;
 
}
.popup_block .popup {
	float: right;
	width: 100%;
	background: #fff;
	margin: 10px 0;
	padding: 10px 0;
	border: 1px solid #bbb;
}
.popup h3 {
	margin: 0 0 20px;
	padding: 5px 10px;
	border-bottom: 1px solid #bbb;
	font: 18px "times newroman";
}
.popup p {
	padding: 5px 10px;
	margin: 5px 0;
	font: 12px tahoma;
}
.popup img.cntrl {
	position: absolute;
	right: -20px;
	top: -20px;
}

jQuery.fn.fadeToggle = function(s, fn){
   return (this.is(":visible"))
   ? this.fadeOut(s, fn)
   : this.fadeIn(s, fn);
};
 
$(document).ready(function(){
    $("#hideshow").hide();
    $("#ee").click(function () {
      $("#hideshow").fadeToggle(2000);
	});
	$("#aa").click(function () {
      	$("#hideshow").fadeOut(2000);
    });
});

10 من التعليقات لـ “إظهار محتويات معينة في نافذة أنيقة بـ jQuery”

1. سعد قال:

   10 نوفمبر 2009 عند 7:56 ص

   و الله شيء جميل
   اسمح لي أسألك أخي : هل درست تصميم المواقع في مدرسة خاصة أو مجهود شخصي ؟
   لأنني أريد السير في نفس المجال لكن الأهل ينظرون للأمر باستخفاف (..) أظن أنني أطلت عليك :)
   بالتوفيق أخي و سوف أحاول تطبيق المثال

   رد
2. Fez-Soft قال:

   12 نوفمبر 2009 عند 6:48 ص

   اهلا ، شكرا لمرورك
   بالنسبة لسؤالك ، مدرسة خاصة مع قليل من الاجتهاد الشخصي
   بالنسبة لمن يستخف بالأمر ، فالأمر ليس كذلك لأنه وظيفة كثير من المطورين العالميين
   بالتوفيق

   رد
3. أحمد قال:

   16 نوفمبر 2009 عند 6:50 ص

   السلام عليكم ورحمة الله وبركاته
   جميل ياخي محمد, لكن ما عملته هو الآتي:
   أنشات 3 ملفات ملف خاص بالــHTML وآخر بالــــ CSS والاخير خاص بـــ js لكن حين تطبيق المثال تفتح لي الصفحة مع وجود النص بشكل كامل والنافذه معا وعند المحاولة بالضغط على زر الاغلاق لا يعمل….. :(
   أرجو التكرم بمساعدتي
   وشكراً

   رد
4. Fez-Soft قال:

   16 نوفمبر 2009 عند 7:28 ص

   أحمد : لا تنس ملف مكتبة jQuery

   رد
5. أحمد قال:

   18 نوفمبر 2009 عند 2:10 ص

   أصبحت 4 ملفات لكن للاسف مازالت النتيجة هي لم تتغير :)

   رد
6. Fez-Soft قال:

   18 نوفمبر 2009 عند 8:55 ص

   اتبع الطريقة المشروحة في الدرس و سترى النتيجة ، لو لم توفق في ذلك ، يمكنك زيارة صفحة المثال و استخراج الأكواد منه

   بالتوفيق احمد

   رد
7. حموديفيتش قال:

   17 فبراير 2010 عند 10:24 م

   صراحه درس في قمة الروعة

   تسلم قلبي

   رد
8. يوسف قال:

   11 مايو 2010 عند 10:12 ص

   السلام عليكم

   اخى الغالى اولا مشكور على هذه المدونه الاكثر من رائعه وعلى مجهوداتك الاروع

   ثانيا احب ان الفت انتباهك الى ان “بسم الله الرحمن الرحيم” تكتب كما كتبتها لك ولاكن لا تكتب هكذا “بسم الله الرحمان الرحيم” كما كتبتها انت

   ارجو الانتباه وبالتوفيق لك

   رد
9. Fez-Soft قال:

   13 مايو 2010 عند 12:41 ص

   @يوسف: شكرا للتنبيه ، تم التصحيح

   رد
10. HawYvb قال:

    13 مايو 2010 عند 7:33 م

    السلام عليكم و رحمة الله وبركاته

    بارك الله فيك أستاذي الفاضل على هذا الشرح و الإضافة الجميلة .. لكن لدي إستسفار بسيط

    ما هي طريقة إستخدام النافذة .. إذا أر دت أنت تظهر بهذا الشكل بشكل منبثق تلقائي بدون الحاجة للضغط على أيقونة أو نص معين …

    بالضبط مثل رسائل التحذير الإفتراضية .. كما طرحته في هذا المقال

    http://www.fez-soft.net/archives/80

    يعني ظهرها بشكل منبثق تلقائيا و لكن عند توفر شرط معين .. توضيح

    كود الأستدعاء مدموج بداخلها متغير القيمة التي ستظهر عن تحقق الشرط

    و بارك الله فيك و زادك من فضله

    رد