كود فتح الروابط الخارجية في المواضيع ب نافذة منبثقة داخل المنتدى

 

شرح كود فتح الروابط الخارجية في نافذة منبثقة داخل المنتدى

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

مزايا هذا الكود:

✅ تحسين تجربة المستخدم: يسمح بمشاهدة المحتوى الخارجي دون مغادرة المنتدى.
✅ زيادة التحكم والأمان: يمنع مغادرة المستخدم للمنتدى دون قصد.
✅ تصميم أنيق وسهل الاستخدام: يوفر واجهة بسيطة ومنظمة لعرض الروابط الخارجية.

📌 كيفية تركيب الكود؟

1️⃣ اذهب إلى إدارة أكواد JavaScript
➝ لوحة الإدارة → عناصر إضافية → إدارة أكواد JavaScript
2️⃣ أضف كودًا جديدًا
➝ عنوان الكود: اختر أي اسم تريده
➝ تحديد عمل الكود: المواضيع فقط
3️⃣ انسخ والصق الكود التالي ثم احفظ التغييرات.

🔽 الكود:

صندوق الكود

/* ========================================================== ❖ التصميم من تنفيذ: جاك سبارو ⚓ ❖ الموقع: https://zx303.blogspot.com/ ❖ مدونة القرصان | جميع الحقوق محفوظة © ❖ يُمنع إزالة أو تعديل الحقوق دون إذن المصمم. ========================================================== */ document.addEventListener("DOMContentLoaded", function () { document.querySelectorAll("a").forEach(function (link) { link.addEventListener("click", function (event) { // استثناء الأزرار خارج الموضوع أو العناصر غير المتعلقة بالموضوع if ( link.tagName.toLowerCase() === "button" || link.closest("form") || !link.closest(".post") || // استثناء الروابط خارج المحتوى (خارج الموضوع) link.closest(".fa_toolbar_L_Sized") // استثناء روابط شريط الإشعارات ) { return; } // التحقق من أن الرابط لا يحتوي على صورة const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp']; const linkHref = link.href.toLowerCase(); // إذا كان الرابط يحتوي على امتداد صورة، لا نمنع الانتقال if (imageExtensions.some(ext => linkHref.endsWith(ext))) { return; // تجاوز تنفيذ الكود } if (link.hostname !== window.location.hostname) { event.preventDefault(); // منع الانتقال الفوري // إنشاء النافذة المنبثقة let popupOverlay = document.createElement("div"); popupOverlay.style.position = "fixed"; popupOverlay.style.top = "0"; popupOverlay.style.left = "0"; popupOverlay.style.width = "100%"; popupOverlay.style.height = "100%"; popupOverlay.style.backgroundColor = "rgba(0, 0, 0, 0.8)"; popupOverlay.style.display = "flex"; popupOverlay.style.alignItems = "center"; popupOverlay.style.justifyContent = "center"; popupOverlay.style.zIndex = "1000"; // إنشاء الإطار (iframe) لعرض الرابط let popupFrame = document.createElement("iframe"); popupFrame.src = link.href; popupFrame.style.width = "80%"; popupFrame.style.height = "80%"; popupFrame.style.border = "none"; popupFrame.style.borderRadius = "10px"; popupFrame.style.backgroundColor = "#fff"; // إنشاء صورة زر الإغلاق let closeButton = document.createElement("img"); closeButton.src = "https://cdn-icons-png.flaticon.com/512/1828/1828778.png"; // ???? رابط صورة زر الإغلاق (يمكنك تغييره) closeButton.style.position = "absolute"; closeButton.style.top = "15px"; closeButton.style.right = "20px"; closeButton.style.width = "35px"; // حجم الصورة closeButton.style.cursor = "pointer"; closeButton.style.transition = "0.3s"; // عند النقر على زر الإغلاق، يتم إزالة النافذة المنبثقة closeButton.addEventListener("click", function () { document.body.removeChild(popupOverlay); }); // عند النقر على الخلفية السوداء، يتم إغلاق النافذة popupOverlay.addEventListener("click", function (e) { if (e.target === popupOverlay) { document.body.removeChild(popupOverlay); } }); // إضافة العناصر إلى الصفحة popupOverlay.appendChild(popupFrame); popupOverlay.appendChild(closeButton); document.body.appendChild(popupOverlay); } }); }); }); /* ========================================================== ❖ نهاية كود التصميم بواسطة جاك سبارو ⚓ ❖ https://zx303.blogspot.com/ | مدونة القرصان ========================================================== */

🔚 الخاتمة

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

💡 لا تترددوا في تجربة الكود ومشاركتنا تجاربكم في التعليقات! وإن كان لديكم أي استفسار أو اقتراح، فنحن هنا للمساعدة.

📢 معًا نجعل منتدياتنا بيئة نظيفة ومفيدة للجميع! 🚀💙

دمتم بخير، وإلى لقاء قريب في مواضيع أخرى مفيدة! 😊