Shraddha Nevase

------------------------------------ document.addEventListener('DOMContentLoaded', () => { // تحديد كل أزرار "اقرأ المزيد" (تم التغيير هنا) const readMoreButtons = document.querySelectorAll('.read-more-btn'); // تحديد كل أزرار الإغلاق (لا تغيير) const modalCloseButtons = document.querySelectorAll('.modal-close'); // تحديد كل خلفيات النوافذ (لا تغيير) const modalOverlays = document.querySelectorAll('.modal-overlay'); // إضافة مستمع حدث النقر لكل زر "اقرأ المزيد" (تم التغيير هنا) readMoreButtons.forEach(button => { // نستخدم button بدلاً من trigger button.addEventListener('click', () => { // الحصول على ID النافذة المستهدفة من الزر نفسه const modalId = button.getAttribute('data-modal-target'); const targetModal = document.querySelector(modalId); if (targetModal) { openModal(targetModal); } }); }); // --- باقي كود JavaScript كما هو (لا تغيير) --- // إضافة مستمع حدث النقر لكل زر إغلاق modalCloseButtons.forEach(button => { button.addEventListener('click', () => { const modal = button.closest('.modal'); if (modal) { closeModal(modal); } }); }); // إضافة مستمع حدث النقر لكل خلفية modalOverlays.forEach(overlay => { overlay.addEventListener('click', () => { const modal = overlay.closest('.modal'); if (modal) { closeModal(modal); } }); }); // إغلاق النافذة عند الضغط على زر Escape document.addEventListener('keydown', (event) => { if (event.key === 'Escape') { const activeModal = document.querySelector('.modal.active'); if (activeModal) { closeModal(activeModal); } } }); // دالة لفتح نافذة منبثقة (لا تغيير) function openModal(modal) { if (!modal) return; modal.classList.add('active'); document.body.classList.add('modal-open'); } // دالة لإغلاق نافذة منبثقة (لا تغيير) function closeModal(modal) { if (!modal) return; modal.classList.remove('active'); document.body.classList.remove('modal-open'); } });

Participar

Entrar

Registrar

Pesquisar

Theme Switcher

Day Mode

Shraddha Nevase

Linha de Tempo

Amigos

fotos

Vídeos

Produtos

Curtidas

Grupos

No data to show

هنا يظهر عنوان المنشور أو جزء صغير من النص الطويل ليكون بمثابة معاينة...

/* --- تنسيق المعاينة (تم التعديل) --- */ .post-summary { border: 1px solid #ccc; padding: 15px; margin-bottom: 20px; /* تمت إزالة cursor: pointer; */ background-color: #f9f9f9; border-radius: 8px; max-width: 500px; } /* تمت إزالة .post-summary:hover أو يمكن تعديله لتأثير أخف */ /* .post-summary:hover { background-color: #f1f1f1; } */ .summary-text { margin-bottom: 10px; max-height: 60px; overflow: hidden; text-overflow: ellipsis; } .summary-image-container img { max-width: 100px; height: auto; display: block; /* margin-top: 10px; - يمكن إزالته إذا كان الزر يعطي مسافة كافية */ } /* --- تنسيق زر "اقرأ المزيد" (جديد) --- */ .read-more-btn { display: inline-block; /* ليأخذ حجم المحتوى ولكن يمكن تطبيق هوامش */ margin-top: 15px; /* مسافة فوق الزر */ padding: 8px 16px; /* تباعد داخلي للزر */ background-color: #007bff; /* لون خلفية أزرق (مثال) */ color: white; /* لون النص أبيض */ border: none; /* بدون حدود */ border-radius: 5px; /* زوايا دائرية */ cursor: pointer; /* مؤشر اليد عند المرور فوقه */ font-size: 14px; text-align: center; transition: background-color 0.2s ease; /* تأثير بسيط عند المرور */ } .read-more-btn:hover { background-color: #0056b3; /* لون أغمق عند المرور */ } /* --- تنسيق النافذة المنبثقة (Modal) - لا تغيير هنا --- */ .modal { display: none; /* ... باقي التنسيقات كما هي ... */ } .modal.active { display: flex; } .modal-overlay { /* ... */ } .modal-content { /* ... */ } .modal-close { /* ... */ } .modal-full-text { /* ... */ } .modal-image-container img { /* ... */ } body.modal-open { overflow: hidden; }

عنوان المنشور الكامل هنا