السلام عليكم ورحمة الله وبركاته ....
كيف لي ان اظلل الصفحة عند اظهار صندوق معين؟
كما في اظهار الصور في فيس بوك حيث عند الضغط على صورة معينة يظهر صندوق يحتوي على الصور التي تم الضغط عليها وباقي الصفحة يكون مظلل وهذه هي مشكلتي فقط كيف اجعل الصفحة غير نشطة ومظلله واليكم المثال في الصورة :
تم تعديل هذه المشاركة بواسطة husam_falah في 18 يونيو 2013 في 13:51
تمت الاجابة على الموضوع من قبل الأخ مؤيد السعدي مشكوراً
رابط الموضوع :
تم تعديل هذه المشاركة بواسطة husam_falah في 18 يونيو 2013 في 15:39
السلام عليكم
يمكنك فعل مثل هذا من خلال معرفتك بلغة التنسيق css وبعض أكواد javaScript للإظهار والإخفاء والتالي مثال لها :
*{padding:0;margin:0;}
body{
text-align:center;
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/bg.jpg',
sizingMethod='scale');
}
#messageBox{
position: fixed;
width: 100%;
height: 100%;
display: table;
background-color: rgba(0,0,0,0.7);
z-index:1;
display: none;
}
#messageBox2{
display: table-cell;
text-align: center;
vertical-align: middle;
}
#messageBox3{
position: relative;
display: inline-block;
text-align: center;
background-color: rgba(255,255,255,0.7);
padding: ;
border-radius: 0 20px 0 20px;
}
#messageBox3 .content{
background-color: #FFF;
display: inline-block;
min-width: 200px;
min-height: 100px;
border-radius: 0 10px 0 10px;
padding: 10px;
}
#messageBox3 .close{
position: absolute;
display: inline-block;
top: -19px;
left: -19px;
padding: 5px 10px 5px 10px;
border-radius: 30px;
background-color: #DDD;
}
#messageBox3 .close:hover{
cursor:pointer;
background-color: #666;
color:#FFF;
}
#clickHere{
font-size: 22px;
}
#clickHere:hover{
cursor:pointer;
}سنقوم بإنشاء صندوق messageBox ونجعل وضعه ثابت بالنسبة للشاشة أو مطلق إن كان المحتوى كبير وسنجعل طريقة العرض لهذا الصندوق هو table لتوسيط محتويه بسهولة وسنجعل هذا الصندوق طبقة عليا من خلال z-index ليكون أعلى الطبقات على حسب الطبقات لديك بالإضافة للعرض والطول بحيث يحتوي كامل الصفحة , بالإضافة للخلفية الشفافة لهذا الصندوق من خلال rgba ولدعم نطاق عريض من المتصفحات يمكنك استخدام الصور الشفافة راجع مشاركتي في هذا الموضوع ستفيدك في هذه النقطة .
- الآن ننشىء صندوق داخلي messageBox2 ونجعل طريقة العرض هي table-cell ونقوم بتوسيط هذا الصندوق .
- ننشىء صندوق أخر messageBox3 لإنشاء إطار شفاف أخر حول المحتوى - يمكنك تجاهل هذه النقطة -
- خصائص عنصر المحتوى content .
- ذر الإغلاق close بوضع مطلق بالنسبة للصندوق messageBox3 .
وكود html سيكون على النحو التالي:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script>
$(function(){
$('#clickHere').click(function(){
$('#messageBox').fadeIn(500).css({"display":"table"});
});
$('#messageBox .close').click(function(){
$('#messageBox').fadeOut(500);
});
$('#messageBox').click(function(){
$('#messageBox').fadeOut(500);
});
$('#messageBox3').click(function(){
return false;
});
});
</script>
</head>
<body>
<div id="messageBox">
<div id="messageBox2">
<div id="messageBox3">
<div class="close">X</div>
<div class="content">
ضع ما تشاء هنا سواء صورة صحفحة أخرى أو فيديو أو غير ذلك
</div>
</div>
</div>
</div>
<div id="clickHere">إضغط هنا</div>
</body>
</html>- طبعاً تم استخدام مكتبة jQuery لإظهار وإخفاء الصندوق
- لإظهر الصندوق إضغط على كلمة "إضغط هنا" .
- لإخفاء الصندوق إضغط في أي مكان خارج الصندوق أو على ذر الإغلاق .
وهذا رابط تنزيل الملف كامل
تعديل :
اقتباستمت الاجابة على الموضوع من قبل الأخ مؤيد السعدي مشكوراً
- يبدوا أنني أرسلت المشاركة قبل أن أرى ردك , على أي حال المشاركة بها الطريقة عملياً بشئ من التفصيل
تم تعديل هذه المشاركة بواسطة ahmedsaoud31 في 18 يونيو 2013 في 15:47
لاتحسبن العلم ينفع وحده مالم يتوج ربه بخلاق
لا إله إلا أنت سبحانك إني كنت من الظالمين
وعليك السلام ورحمة الله وبركاته
مشكوووووووور جزاك الله خير الجزاء
ان الله لا يضيع اجر المسحنين بارك الله فيك اخي ...
لك مني اطيب تحياتي وخالص دعائي عسى الله ان يوفقك في حياتك ويجعلها في ميزان حسناتك
مشكور على جهودك ...
اخي مع انني طلبت المساعدة فأنا مستعد في مساعدتك وذلك لرد الجميل ومساعدة اي احد ان احتاج الى مساعدة
ولا تتردد في طلبها فأنا في رسم الخدمة وكما نقول نحن العراقيون "احنة بخدمة الطيبين"
مع العلم انا طالب ومبرمج واعمل كرجل صيانة حاسبات وعندي خبرة كافية في اللغات التالية :
Visual Basic , Visual Basic.net ,VBscript , HTML , XML , CSS , PHP , jQuery , JavaScript , MySQL
.
.
.
تحيـــــاتي وتمنياتي بالتوفيق للجميع ...
اللهم آمين , ولك بالمثل وزيادة
وشكراً على عرضك المساعدة , بكل تأكيد لن أتأخر في طلب المساعدة , بوركت هذا أصل الطيبين .
لك مني كل التحية , دمت بخير
لاتحسبن العلم ينفع وحده مالم يتوج ربه بخلاق
لا إله إلا أنت سبحانك إني كنت من الظالمين