اضافات بلوجر كمبيوتر جرافيك كتب الكترونية CSS ادوات سيو اكواد HTML البرمجة مواقع للتصميم
آخر الأخبار

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

اكتشف الحلول المتطورة في تطبيقات الأجهزة المحمولة والتكنولوجيا والتعليم وموضوعات بلوجر. كن على اطلاع دائم بمقالات الخبراء والموارد الإبداعية والأدوات القوية لتعزيز مشاريعك الرقمية.

Home
css

إنشاء نوافذ منبثقة باستخدام CSS فقط ثلاثة طرق مختلفة

، هو الخيار الأمثل. أما إذا كنت بحاجة إلى مرونة وتخصيص، فإن استخدام ، أو :target سيكون أكثر ملاءمة.
wesam elngar
إنشاء نوافذ منبثقة باستخدام CSS فقط: ثلاثة طرق مختلفة

ثلاثة أمثلة مختلفة لإنشاء نوافذ منبثقة باستخدام CSS فقط


الأول باستخدام HTML عنصر <details>، والثاني باستخدام مربع اختيار <input type="checkbox">، والثالث باستخدام الفئة الزائفة :target.

الأول باستخدام HTML عنصر <details>

في هذا المثال، كل زر يفتح نافذة منبثقة معينة تقع أسفله.يتم إغلاق النافذة بالنقر خارج نطاقها، بينما يتم عرض علامة الإغلاق (✖) كعنصر زخرفي.

كيف يعمل؟ 
  1. يتم وضع المحتوى داخل <details> وعنصر <summary> يعمل كزر للفتح والإغلاق. 
  2. عند النقر على <summary> يتم عرض المحتوى أو إخفاؤه.
 مميزات: 

  1. بسيط وسهل التنفيذ.
  2.  لا يتطلب أي CSS إضافي. 
عيوب: 
  1. محدود في التخصيص.
  2.  لا يدعم الرسوم المتحركة أو التأثيرات المعقدة.
    مثال
    اسم الزر

    النص في النهاية النموذجية

    HTML 1 

    
<details>
    <summary>اسم الزر</summary>
    <div class="cmc">
      <div class="cmt">
        <p>النص في النهاية النموذجية</p>
      </div>
    </div>
  </details>

    CSS 2 

    
/*حاوية للزر حتى لا يقفز المحتوى عند تغيير موضعه */
  .css-modal-details {
      height: 60px;
      display:flex;
      align-items:center;
      justify-content:center;
  }

  /* زر للفتح */
  .css-modal-details summary {
      display: inline-flex;
      margin: 10px;
      text-decoration: none;
      position: relative;
      font-size: 20px;
      line-height: 20px;
      padding: 12px 30px;
      color: #FFF;
      font-weight: bold;
      text-transform: uppercase;
      font-family: 'Roboto', Тahoma, sans-serif;
      background: #337AB7;
      cursor: pointer;
      border: 2px solid #BFE2FF;
      overflow: hidden;
      z-index: 1;
  }
  .css-modal-details summary:hover,
  .css-modal-details summary:active,
  .css-modal-details summary:focus {
      color: #FFF;
  }
  .css-modal-details summary:before {
      content: '';
      position: absolute;
      top: 0;
      right: -50px;
      bottom: 0;
      left: 0;
      border-right: 50px solid transparent;
      border-top: 50px solid #2D6B9F;
      transition: transform 0.5s;
      transform: translateX(-100%);
      z-index: -1;
  }
  .css-modal-details summary:hover:before,
  .css-modal-details summary:active:before,
  .css-modal-details summary:focus:before {
      transform: translateX(0);
  }

  /* عندما يتم فتح النافذة، ينتقل الزر إلى وضع ملء الشاشة */
  .css-modal-details details[open] summary {
      cursor: default;
      opacity: 0;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 3;
      width: 100%;
      height: 100%;
  }

  /* حاوية لتغميق الصفحة */
  .css-modal-details details .cmc {
      display:flex;
      align-items:center;
      justify-content:center;
  }
  .css-modal-details details[open] .cmc {
      pointer-events: none;
      z-index: 4;
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      animation: bg 0.5s ease;
      background: rgba(51, 122, 183, 0.7);
  }

  /* نافذة نموذجية */
  .css-modal-details details .cmt {
      font-family: Verdana, sans-serif;
      font-size: 16px;
      padding: 20px;
      width:80%;
      max-width: 600px;
      max-height: 70%;
      transition: 0.5s;
      border: 6px solid #BFE2FF;
      border-radius: 12px;
      background: #FFF;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
      text-align: center;
      overflow: auto;
  }
  .css-modal-details details[open] .cmt {
      animation: scale 0.5s ease;
      z-index: 4;
      pointer-events: auto;
  }

  /* زر زخرفي مع صليب */
  .css-modal-details details[open] .cmc:after {
      content: "";
      width: 50px;
      height: 50px;
      border: 6px solid #BFE2FF;
      border-radius: 12px;
      position: absolute;
      z-index: 10;
      top: 20px;
      right: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23337AB7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
      background-color: #FFF;
      background-size: cover;
      animation: move 0.5s ease;
  }

  /* الرسوم المتحركة */
  @keyframes scale {
      0% {
          transform: scale(0);
      }
      100% {
          transform: scale(1);
      }
  }
  @keyframes move {
      0% {
          right: -80px;
      }
      100% {
          right: 20px;
      }
  }
  @keyframes bg {
      0% {
          background: rgba(51, 122, 183, 0);
      }
      100% {
          background: rgba(51, 122, 183, 0.7);
      }
  }
    الثاني باستخدام مربع اختيار <input type="checkbox">،

    هذه الطريقة تعتمد على استخدام مربع اختيار (checkbox) مخفي للتحكم في فتح وإغلاق النافذة المنبثقة.


    كيف يعمل؟
    1.  يتم إنشاء <input type="checkbox"> مخفي. يتم استخدام تسمية <label> للتحكم في حالة المربع (محدد أو غير محدد).
    2.  يتم استخدام المحدد :checked في CSS لإظهار أو إخفاء النافذة.
    مميزات:
    1.  مرن وقابل للتخصيص.
    2.  يدعم الرسوم المتحركة باستخدام CSS.
    العيوب: 
    1. يتطلب HTML إضافي.
    2.  قد يكون معقدًا بعض الشيء للمبتدئين. 
      مثال

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

    HTML 1 

    
<div>
<!-- زر -->		
<div class="css-modal-checkbox-container">
	<label for="css-modal-checkbox" class="css-modal-checkbox">اسم الزر</label>
</div>

<!-- نافذة نبثقة -->	
<input type="checkbox" id="css-modal-checkbox" />	
<div class="cmc">
    <div class="cmt">
		<p>   
   
استكشف في مدونة أوعي وشك عالم الابتكار
اكتشف الحلول المتطورة في تطبيقات الأجهزة المحمولة والتكنولوجيا والتعليم وموضوعات بلوجر. كن على اطلاع دائم بمقالات الخبراء والموارد الإبداعية والأدوات القوية لتعزيز مشاريعك الرقمية</p>
	</div>
	<label for="css-modal-checkbox" class="css-modal-close"></label>
</div>
</div>

    CSS 2 

    
/* حاوية للأزرار*/
.css-modal-checkbox-container {
    height: 60px;
    display:flex;
    align-items:center;
    justify-content:center;
}
/* إزالة العلم */
#css-modal-checkbox {
    display: none;
}
/* زر للفتح */
.css-modal-checkbox {
    display: inline-flex;
    margin: 10px;
    text-decoration: none;
    position: relative;
    font-size: 20px;
    line-height: 20px;
    padding: 12px 30px;
    color: #FFF;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'Roboto', Тahoma, sans-serif;
    background: #337AB7;
    cursor: pointer;
    border: 2px solid #BFE2FF;
    overflow: hidden;
    z-index: 1;    
}
.css-modal-checkbox:hover,
.css-modal-checkbox:active,
.css-modal-checkbox:focus {
    color: #FFF;
}
.css-modal-checkbox:before {
    content: '';
    position: absolute;
    top: 0;
    right: -50px;
    bottom: 0;
    left: 0;
    border-right: 50px solid transparent;
    border-top: 50px solid #2D6B9F;
    transition: transform 0.5s;
    transform: translateX(-100%);
    z-index: -1;
}
.css-modal-checkbox:hover:before,
.css-modal-checkbox:active:before,
.css-modal-checkbox:focus:before {
    transform: translateX(0);
}
 
/*حاوية لتغميق الصفحة */
#css-modal-checkbox + .cmc {
    display: none;
}
#css-modal-checkbox:checked + .cmc {
    display:flex;
    align-items:center;
    justify-content:center;    
    z-index: 4;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    animation: bg 0.5s ease;
    background: rgba(51, 122, 183, 0.7);
}
 
/* نافذة منبثقة */
#css-modal-checkbox:checked + .cmc .cmt {
    font-family: Verdana, sans-serif;  
    font-size: 16px;
    padding: 20px;
    width:80%;
    max-width: 600px;
    max-height: 70%;
    transition: 0.5s;
    border: 6px solid #BFE2FF;
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
    text-align: center;
    overflow: auto;
    animation: scale 0.5s ease;
}
/* زر به صليب يغلق النافذة */
.css-modal-close {
    width: 50px;
    height: 50px;
    border: 6px solid #BFE2FF;
    border-radius: 12px;
    position: absolute;
    z-index: 10;
    top: 20px;
    right: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23337AB7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
    background-color: #FFF;
    background-size: cover;
    animation: move 0.5s ease;
    cursor: pointer;
}
 /* الرسوم المتحركة */
@keyframes scale {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes move {
    0% {
        right: -80px;
    }
    100% {
        right: 20px;
    }
}
@keyframes bg {
    0% {
        background: rgba(51, 122, 183, 0);
    }
    100% {
        background: rgba(51, 122, 183, 0.7);
    }
}
    الثالث باستخدام الفئة الزائفة :target

    يمكن فتح هذه النافذة النموذجية بأي عدد منها ويمكن وضعها في أي مكان، على سبيل المثال، في الطابق السفلي.


    كيف يعمل؟
    1.  يتم إنشاء رابط <a> يشير إلى عنصر باستخدام #id.
    2.  يتم استخدام :target في CSS لتحديد العنصر الذي يتم الإشارة إليه وإظهاره كنافذة منبثقة.

     مميزات: 
    1. لا يتطلب JavaScript.
    2.  يمكن وضع النافذة في أي مكان في الصفحة.

     عيوب:
    1.  يتطلب إغلاق النافذة النقر على رابط آخر.
    2.  محدود في التفاعلات المعقدة. 
      مثال
    اسم الزر

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

    HTML 1 

    
<div><!-- زر -->	
<div class="css-modal-target-container">
	<a class="css-modal-open" href="#css-modal-target">اسم الزر </a>
</div>

<!-- نافذة منبثقة -->	
<div class="css-modal-target" id="css-modal-target">
    <div class="cmt">
		<p>استكشف في مدونة أوعي وشك عالم الابتكار
اكتشف الحلول المتطورة في تطبيقات الأجهزة المحمولة والتكنولوجيا والتعليم وموضوعات بلوجر. كن على اطلاع دائم بمقالات الخبراء والموارد الإبداعية والأدوات القوية لتعزيز مشاريعك الرقمية</p>
	</div>
	<a href="#close" class="css-modal-close"></a>	
</div></div>

    CSS 2 

    
/* حاوية للأزرار */
.css-modal-target-container {
    height: 60px;
    display:flex;
    align-items:center;
    justify-content:center;
}
/* زر للفتح */
.css-modal-open {
    display: inline-flex;
    margin: 10px;
    text-decoration: none;
    position: relative;
    font-size: 20px;
    line-height: 20px;
    padding: 12px 30px;
    color: #FFF;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'Roboto', Тahoma, sans-serif;
    background: #337AB7;
    cursor: pointer;
    border: 2px solid #BFE2FF;
    overflow: hidden;
    z-index: 1;    
}
.css-modal-open:hover,
.css-modal-open:active,
.css-modal-open:focus {
    color: #FFF;
}
.css-modal-open:before {
    content: '';
    position: absolute;
    top: 0;
    right: -50px;
    bottom: 0;
    left: 0;
    border-right: 50px solid transparent;
    border-top: 50px solid #2D6B9F;
    transition: transform 0.5s;
    transform: translateX(-100%);
    z-index: -1;
}
.css-modal-open:hover:before,
.css-modal-open:active:before,
.css-modal-open:focus:before {
    transform: translateX(0);
}
 
/* حاوية لتغميق الصفحة */
.css-modal-target {
    display: none;
}
.css-modal-target:target {
    display:flex;
    align-items:center;
    justify-content:center;    
    z-index: 4;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    animation: bg 0.5s ease;
    background: rgba(51, 122, 183, 0.7);
}
 
/* Модальное окно */
.css-modal-target .cmt {
    font-family: Verdana, sans-serif;  
    font-size: 16px;
    padding: 20px;
    width: 80%;
    z-index: 8;
    max-width: 600px;
    max-height: 70%;
    transition: 0.5s;
    border: 6px solid #BFE2FF;
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
    text-align: center;
    overflow: auto;
    animation: scale 0.5s ease;
}
 
/* زر به صليب يغلق النافذة*/
.css-modal-close {
    position: relative;
    display: block;
}
.css-modal-close:after {
    content: "";
    width: 50px;
    height: 50px;
    border: 6px solid #BFE2FF;
    border-radius: 12px;
    position: fixed;
    z-index: 10;
    top: 20px;
    right: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23337AB7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
    background-color: #FFF;
    background-size: cover;
    animation: move 0.5s ease;
}
.css-modal-close:before {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    content: "";
    cursor: default;
}
 
/*  الرسوم المتحركة */
@keyframes scale {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes move {
    0% {
        right: -80px;
    }
    100% {
        right: 20px;
    }
}
@keyframes bg {
    0% {
        background: rgba(51, 122, 183, 0);
    }
    100% {
        background: rgba(51, 122, 183, 0.7);
    }
}
    الخلاصة:
     تعتبر النوافذ المنبثقة من الأدوات الأساسية في تطوير الويب، ويمكن إنشاؤها باستخدام CSS فقط بعدة طرق. كل طريقة لها مميزاتها وعيوبها، ويعتمد اختيار الطريقة المناسبة على احتياجات المشروع.

     إذا كنت تبحث عن بساطة وسرعة في التنفيذ، فإن <details>، هو الخيار الأمثل. أما إذا كنت بحاجة إلى مرونة وتخصيص، فإن استخدام <input type="checkbox">، أو :target سيكون أكثر ملاءمة.

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

    🌟 انتبه عزيزي أعضاء المجتمع! 🌟
    نحن متحمسون لمشاركتك في مناقشاتنا الديناميكية. لضمان بيئة محترمة وشاملة للجميع، نطلب تعاونكم مع الإرشادات التالية:
    1. احترام الخصوصية: يرجى عدم مشاركة معلومات حساسة أو شخصية في تعليقاتك.
    2. انشر الإيجابية: نحن نتمسك بسياسة عدم التسامح مطلقًا مع خطاب الكراهية أو اللغة المسيئة. دعونا نحافظ على محادثاتنا محترمة وودية.
    3. اللغة المفضلة: لا تتردد في التعبير عن نفسك باللغة الإنجليزية أو العربية. ستساعدنا هاتان اللغتان في الحفاظ على مناقشة واضحة ومتماسكة.
    4. احترام التنوع: لتعزيز جو شامل، نطلب منك بكل احترام تجنب مناقشة المسائل الدينية في تعليقاتك.
    تذكر أن مساهماتك قيمة، ونحن نقدر التزامك بجعل مجتمعنا مكانًا ترحيبيًا للجميع. دعونا نواصل التعلم والنمو معًا من خلال المناقشات البناءة والاحترام المتبادل.
    شكرًا لكونك جزءًا من مجتمعنا اوعي وشك! 🌟

    Post a Comment