كيفية إنشاء: إنشاء رسالة نافذة

تعلم كيفية إنشاء رسائل نافذة باستخدام CSS (رسالة نافذة).

رسالة نافذة

عادةً ما تكون رسائل النافذة في أسفل الصفحة، لتخبر المستخدمين عن بعض الأمور الخاصة: نصائح/استراتيجيات、عروض خصومات، أو إجراءات يجب اتخاذها، وما إلى ذلك.

Kuwa a hanyar: kaiji a hanyar

إنشاء رسالة نافذة

الخطوة الأولى - إضافة HTML:

<div class="callout">
  <div class="callout-header">عنوان رسالة النافذة</div>
  <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
  <div class="callout-container">
    <p>نص...</p>
  </div>
</div>

إذا كنت ترغب في إضافة ميزة إغلاق رسالة النافذة، يرجى إضافة <span> عنصر، وإعداد له onclick خصائص، مما يعني "إذا قمت بالنقر علي، إخفاء عنصر الأب الخاص بي"، أي الحاوية <div class="callout">。

نصيحة:استخدام رمز HTML "&:times;"إنشاء الحرف "x"."

الخطوة الثانية - إضافة CSS:

إعداد النمط لنافذة الرسالة وزر الإغلاق:

/* نافذة رسالة - معلقة في أسفل الصفحة */
.callout {
  الوضع: ثابت;
  الأسفل: 35px;
  اليمين: 20px;
  marg: 20px;
  أقصى عرض: 300px;
{}
/* عنوان رسالة نافذة */
.callout-header {
  ملء: 25px 15px;
  لون الخلفية: #555;
  حجم الخط: 30px;
  اللون: أبيض;
{}
/* وحدة رسالة نافذة / الجسم */
.callout-container {
  ملء: 15px;
  لون الخلفية: #ccc;
  اللون: أسود
{}
/* زر الإغلاق */
.closebtn {
  الوضع: مطلق;
  العمود: 5px;
  اليمين: 15px;
  اللون: أبيض;
  حجم الخط: 30px;
  النقرس: سهم;
{}
/* يغير اللون عند وضع المؤشر عليه */
.closebtn:hover {
  اللون: الفاتح الأسود;
{}

Kuwa a hanyar: kaiji a hanyar

Kuwa a hanyar: tafin

Kuwa a hanyar: tafin:Kuwa a hanyar: kaiji rahatsi

Kuwa a hanyar: tafin:Kuwa a hanyar: kaiji tafin