چگونه ایجاد کنم: مودال CSS/JS

آموزش ایجاد مودال با استفاده از CSS و JavaScript.

چگونه مودال ایجاد کنم

مودال یک پنجره محاوره/پرش است که در بالای صفحه جاری نمایش داده می‌شود:

مودال باز کن

پرسنل طور پر تجربہ کریں

قدم اول - اضافه کردن HTML:

<!-- تحریک/باز کردن مودال -->
<button id="myBtn">مودال باز کن</button>
<!-- مودال -->
<div id="myModal" class="modal">
  <!-- محتوای مودال -->
  <div class="modal-content">
    <span class="close">×</span>
    <p>نوعی متن در مودال...</p>
  </div>
</div>

دو قدم - اضافه کردن CSS:

/* مودل (پس منظر) */
.modal {
  display: none; /* اصل میں پوشیدہ */
  position: fixed; /* پوزیشن قائم رکھی جائے */
  z-index: 1; /* اعلیٰ درجہ */
  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 {
  background-color: #fefefe;
  margin: 15% auto; /* آپریشن سے 15% اور مرکز میں */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* ممکن ہے کہ اس کی اسکرین سائز کے مطابق تبدیل ہو */
}
/* بند بٹن */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

تیسری قدم - جاوااسکریپٹ شامل کریں:

// مودل حاصل کیاجائے
var modal = document.getElementById("myModal");
// مودل کھولنے والا بٹن حاصل کیاجائے
var btn = document.getElementById("myBtn");
// بند مودل کا <span> علامت حاصل کیاجائے
var span = document.getElementsByClassName("close")[0];
// جب یوزر بٹن پر کلیک کرتا ہے، مودل کھولا جائے
btn.onclick = function() {
  modal.style.display = "block";
}
// جب یوزر <span> (x) پر کلیک کرتا ہے، مودل بند کر دیا جائے
span.onclick = function() {
  modal.style.display = "none";
}
// جب جب کس کسی کیو بجائی مودل بجائی کلیک کرتا ہے، اس کو بند کر دیا جائے
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

پرسنل طور پر تجربہ کریں

سر اور پیچھلائی شامل کریں

مودل سر، متن اور پیچھلائی میں کلاس شامل کریں:

<!-- موڈل مواد -->
<div class="modal-content">
  <div class="modal-header">
    <span class="close">×</span>
    <h2>Modal Header</h2>
  </div>
  <div class="modal-body">
    <p>مودل بادی میں کچھ متن</p>
    <p>کچھ دوسرے متن...</p>
  </div>
  <div class="modal-footer">
    <h3>Modal Footer</h3>
  </div>
</div>

مودل سر، متن اور پیچھلائی کا استایل سیٹ کریں، اور اینیمیشن شروع کریں (مودل سے نیچے سے داخل ہونے کا اینیمیشن):

/* موڈل بکسر کا سر */
.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}
/* موڈل بکسر کا متن */
.modal-body {padding: 2px 16px;}
/* موڈل بکسر کا پیچھلائی */
.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}
/* موڈل بکسر کا مواد */
.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);
  animation-name: animatetop;
  animation-duration: 0.4s
}
/* اینیمیشن اضافہ کریں */
@keyframes animatetop {
  from {top: -300px; opacity: 0}
  to {top: 0; opacity: 1}
}

پرسنل طور پر تجربہ کریں

نچلے موڈل بکسر

ایک پورا چوڑائی والا نچلے موڈل بکسر بنائیں جو سے باہر سے نیچے سے داخل ہو:

مثال - نچلے موڈل بکسر

پرسنل طور پر تجربہ کریں

کیس میں کالیم کا کالر ڈاؤن لوڈ کرنا کیس

کیس میں کالیم کا کالر ڈاؤن لوڈ کرنا کیسکیس میں کالیم کا کالر ڈاؤن لوڈ کرنا کیس

کیس میں کالیم کا کالر ڈاؤن لوڈ کرنا کیسکیس میں کالیم کا کالر ڈاؤن لوڈ کرنا کیس