تعلم كيفية صناعة Modal باستخدام CSS

1:23:00 ص
في هذا الدرس سنتعلم كيفية صناعة Model بسيط بإستخدام CSS ودون كتابة أي كود أو حتى سطر واحد من لغة جافاسكريبت 




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

سنتعلم في هذا الدرس كيفية عمل Modal  بإستخدام الـ CSS ودون كتابة أي سطر أو كود جافاسكريبت

المهارات التي يفترض عليك معرفتها لكي تستطيع استيعاب الدرس : 
- أساسيات لغتي HTML & CSS

أهم خصائص CSS التي يجب عليك معرفة كيفية التعامل معها : 
- Position Property
- Target Selector

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

النتيجة النهائية للدرس : 
See the Pen yaZdKG by Mohammed Jaffar (@MJK) on CodePen.

الآن دعنا نبدأ في الدرس :

في البداية كما تعودنا سنقوم ببناء هيكلة صفحة HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <a href="#target" class="btnl">اضغط هنا</a>
    <div id="target" class="modal">
      <div class="content">
        <h2>مدونة محمد جعفر</h2>
        <p>مدونة تعليمة في مجال تطوير الويب</p>
        <p>عند الإنتهاء اضغط على إغلاق</p>
        <a href="#" class="close">إغلاق</a>
      </div>
    </div>
  
</body>
</html>

النتيجة :

 قبل أن نبدأ في كتابة أكواد CSS دعنا نشرح الفكرة التي سنقوم بالعمل عليها

في البداية كما لاحظت في الكود السابق لدينا في البداية رابط (اضغط هنا) وبعدها لدينا div يحمل كلاس بإسم (modal)

ماسنقوم بفعله في البداية هو أخفاء الـdiv الذي يحتوي على المعلومات وعند الضغط على الرابط سيقوم بإظهار div المعلومات على شكل نافذة
وعند الضغط على زر (إغلاق) سيقوم بإغلاق النافذة

لاحظ ايضاً أن العنصر (<a>) يحتوي على خاصية (href) وهو الرابط الذي سيتجه إليه عند الضغط عليه وهنا قمنا بوضع الرابط(#target) وهو نفس اسم المعرف (id) الذي قمنا بوضعه في div النافذة والذي يحمل كلاس بإسم (modal)
وعند الضغط على زر (إغلاق) سيقوم بالتوجه إلى الرابط (#) وبالتالي سيقوم بإغلاق النافذة

الآن دعنا نقوم بالبدء في الجزء العملي بكتابة كود الـ CSS

أول خطوة سأقوم بها هي تغيير اتجاه النص بما أننا هذه المرة سنستخدم اللغة العربية بالإضافة إلى أننا سنقوم  بإضافة أحد خطوط جوجل العربية (Droid Arabic Kufi) كما في التالي :

@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
html{
    direction: rtl
}
ثانياً سأقوم بإخفاء div النافذة الذي يحتوي على المعلومات 
.modal {
    display: none;
}
إذا الآن النتيجة كما نرى :



 دعنا الآن نقوم بتنسيق هذا الزر قليلاً ليصبح اجمل 
.btn {
    background: #6061d8;
    padding: 10px;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
}

النتيجة :


حسناً حتى الآن لا يوجد شيء غير طبيعي دعنا الآن نقوم بإظهار النافذة التي تحتوي على المعلومات عند الضغط على هذا الزر
 ولنقوم بذلك سنحتاج لإستخدام (:target) كما في التالي : 
.modal:target {
    display: block;
   }

جميل الآن عندما نقوم بالضغط على الزر سيقوم بإظهار المعلومات وعند الضغط على رابط (إغلاق) سيقوم بإخفائها دعنا الآن نقوم بالتعديل على هذه المعلومات ونجعل شكلها وكأنها نافذة تخرج عند الضغط على الزر لفعل ذلك سنقوم بإضافة الكود التالي :

.modal:target .content {
    background: #fff;
    border-radius: 10px;
    width: 450px;
    padding: 20px;
    position: absolute;
    top: 30%;
    left: calc(50% - 220px);
}

 الآن عند الضغط على الزر ستخرج النافذة ولكن سنحتاج للتعديل قليلاً على هذا الكود الذي اضفناه سابقاً :
.modal:target {
    display: block;
   }
ليصبح كالتالي : 
.modal:target {
    background: rgba(0, 0, 0, 0.55);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    transition: background 0.35s;
}


هنا كل ماقمنا بفعله هو إضافة خلفية سوداء مع تقليل الشفافية إلى 55% ايضاً قمنا في النهاية بإضافة حركة إنتقالية بسيطة للخلفية عند إغلاق النافذة

 النتيجة :



 في النهاية كخطوة اخيرة سنقوم بتنسيق زر الإغلاق فليلاً من خلال إضافة الكود التالي : 

.modal:target .close {
    background: #6061d8;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    position: absolute;
    bottom: 10px;
    left: 20px;
}

الآن لنذهب ونشاهد النتيجة النهائية :

See the Pen yaZdKG by Mohammed Jaffar (@MJK) on CodePen.

مارأيك ؟

 اعتقد بأن النتيجة مرضية للغاية ومن هنا أنت تستطيع التغيير والتعديل في الشكل كما تريد بالطريقة التي تناسبك

  في النهاية اتمنى أن أكون قد وفقت في شرح الفكرة العامة للدرس في حال استفدت من الدرس لا تنسى دعمنا ومشاركة الدرس مع أصدقائك على المواقع الإجتماعية

 دمتم في حفظ الله ورعايته....

ليست هناك تعليقات

المقالات الاكثر مشاهدة

قالب هاش تك 2016 © - منتج إبداعي طور بواسطة حيّاك