ثلاثة أمثلة مختلفة لإنشاء نوافذ منبثقة باستخدام CSS فقط
الأول باستخدام HTML عنصر <details>
في هذا المثال، كل زر يفتح نافذة منبثقة معينة تقع أسفله.يتم إغلاق النافذة بالنقر خارج نطاقها، بينما يتم عرض علامة الإغلاق (✖) كعنصر زخرفي.
كيف يعمل؟- يتم وضع المحتوى داخل <details> وعنصر <summary> يعمل كزر للفتح والإغلاق.
- عند النقر على <summary> يتم عرض المحتوى أو إخفاؤه.
- بسيط وسهل التنفيذ.
- لا يتطلب أي CSS إضافي.
- محدود في التخصيص.
- لا يدعم الرسوم المتحركة أو التأثيرات المعقدة.
اسم الزر
النص في النهاية النموذجية
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) مخفي للتحكم في فتح وإغلاق النافذة المنبثقة.
كيف يعمل؟
- يتم إنشاء <input type="checkbox"> مخفي. يتم استخدام تسمية <label> للتحكم في حالة المربع (محدد أو غير محدد).
- يتم استخدام المحدد :checked في CSS لإظهار أو إخفاء النافذة.
- مرن وقابل للتخصيص.
- يدعم الرسوم المتحركة باستخدام CSS.
- يتطلب HTML إضافي.
- قد يكون معقدًا بعض الشيء للمبتدئين.
استكشف في مدونة أوعي وشك عالم الابتكار اكتشف الحلول المتطورة في تطبيقات الأجهزة المحمولة والتكنولوجيا والتعليم وموضوعات بلوجر. كن على اطلاع دائم بمقالات الخبراء والموارد الإبداعية والأدوات القوية لتعزيز مشاريعك الرقمية
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
يمكن فتح هذه النافذة النموذجية بأي عدد منها ويمكن وضعها في أي مكان، على سبيل المثال، في الطابق السفلي.
كيف يعمل؟
- يتم إنشاء رابط <a> يشير إلى عنصر باستخدام #id.
- يتم استخدام :target في CSS لتحديد العنصر الذي يتم الإشارة إليه وإظهاره كنافذة منبثقة.
- لا يتطلب JavaScript.
- يمكن وضع النافذة في أي مكان في الصفحة.
- يتطلب إغلاق النافذة النقر على رابط آخر.
- محدود في التفاعلات المعقدة.
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);
}
}