কিভাবে বানানো: পপআপ

CSS এবং JavaScript দিয়ে পপআপ বানানোর কিভাবে শিখুন。

স্বয়ং প্রয়োগ করুন

পপআপ বানানো কিভাবে?

প্রথম পদক্ষেপ - এইচটিএমএল যোগ করুন:

<div class="popup" onclick="myFunction()">Click me!</div>
  <span class="popuptext" id="myPopup">Popup text...</span>
</div>

দ্বিতীয় পদক্ষেপ - সিএসএস যোগ করুন

/* প্রদর্শনী কনটেন্ট কনটেন্টার */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
/* প্রকৃত প্রদর্শনী (শীর্ষে দেখায়) */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}
/* প্রদর্শনী আংশীয় দিক */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
/* প্রদর্শনী কনটেন্ট ক্লিক করলে এই ক্লাস টুকরা (প্রদর্শনী লুকায়ো এবং দেখায়) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}
/* এনিমেশন (প্রদর্শনী ফ্ল্যাইন) যোগ করুন */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

তৃতীয় পদক্ষেপ - জাভাস্ক্রিপ্ট যোগ করুন

<script>
// ব্যবহারকারী যখন <div> ক্লিক করে, প্রদর্শনী উদ্বুদ্ধ করুন
function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}
</script>

স্বয়ং প্রয়োগ করুন

相关页面

教程：CSS টুলটিপ

教程：如何创建模态