كيف احول السكربت الى رساله منبثقه

مرحباً,

إطلعت على السورس كود الذي أرفقته لكن وجدت ان عدد من دوال javascript مٌعتمدة في ملفات الـphp لكنها غير مٌعرفة أبداً (مثال: دالة showChatCast), أنصحك بمراجعة الدوال التي تعتمدها وإعادة طرح السورس كود من جديد بعد تعريف كل الدوال

لكن رغم هذا سأحاول مساعدتك في إنجاز المطلوب (حسب فهمي للموضوع)

سنبدأ بأول نقطة وهي انك تريد عرض الرسالة في صندوق منبثق, لإنجاز هذا سنحتاج مكتبة نوافذ منبثقة كـBootstrap لتسهيل العمل او نقوم بإنشاء دالة خاصة بهذه العملية وتكون هذه ملفاتها :

هذا كود الـHTML :

<!-- زر فتح النافذة -->
<button id="myBtn">إضغط هنا لفتح النافذة</button>

<!-- محتوى النافذة -->
<div id="myModal" class="modal">

  <!-- المحتوى الفعلي للنافذة -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>رأسية النافذه</h2>
    </div>
    <div class="modal-body">
      <p>محتوى الرسالة المنبثقة</p>
      <p>...</p>
    </div>
    <div class="modal-footer">
      <h3>ذيل النافذة</h3>
    </div>
  </div>

</div>

وهذا كود CSS الخاص بالمظهر :

/* محتوى النافذة (الخلفية) */
.modal {
  display: none; /* إخفاءها في العادة */
  position: fixed; /* إبقاء النافذة ثابتة */
  z-index: 1; /* مستوى بروز النافذة مقارنة بباقي العناصر */
  padding-top: 100px; /* تموضع النافذة (من الأعلى) */
  left: 0;
  top: 0;
  width: 100%; /* عرض كامل */
  height: 100%; /* إرتفاع كامل */
  overflow: auto; /* تفعيل شريط التمرير إذا إقتضى الحال */
  background-color: rgb(0,0,0); /* خلفية سوداء في حال عدم دعم المتصفح للشفافية */
  background-color: rgba(0,0,0,0.4); /* خلفية سوداء شفافة */
}

/* المحتوى الفعلى للنافذة */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* إضافة حركات */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* زر الإغلاق */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #ff9800;
  color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #ff9800;
  color: white;
}

وفي الأخير كود Javascript لتعفيل زر فتح وغلق النافذة :

// جلب النافذة
var modal = document.getElementById("myModal");

// جلب زر فتح النافذة
var btn = document.getElementById("myBtn");

// جلب زر إغلاق النافذة
var span = document.getElementsByClassName("close")[0];

// فتح النافذة عند ضغط زر الفتح
btn.onclick = function() {
  modal.style.display = "block";
}

// غلق النافذة عند ضغط زر الغلق
span.onclick = function() {
  modal.style.display = "none";
}

// تفعيل غلق النافذة عند الظغط على أي عنصر خارج الصندوق
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

تستطيع إعتمدا الكود السابق وإظهار الرسالة بداخله

بالتوفيق.

مشكور على ردك ومساعدتك 

ولكن هل ممكن تخدمني وتدمج الاكواد بالسكربيت لاني حاولت ولكن للاسف لا يعمل

هل يمكنك إعادة طرح السكريبت بعد ان عدلت عليه لأعلم المسارات؟ فهذا قد يساعدني على فهم السكريبت نوعاً ما فأنت ادرى به اكثر مني وبمسارات التعديل

لكن رغم هذا يجب ان اشير أنه للأسف السكريبت غير كامل, إطلعت عليه عدة مرات لكن به نقائص لا أستطيع حلها كون انني لم اطلع على الموقع والسورس كود الكامل له

أنصحك بالتوجه لخمسات او مستقل وعرض المشكل