Skip to Content
เมนู
คุณต้องลงทะเบียนเพื่อโต้ตอบกับคอมมูนิตี้
คำถามนี้ถูกตั้งค่าสถานะ
1 ตอบกลับ
3890 มุมมอง

How do I set a condition to pop-up a block when we click a button using the HTML/CSS editor?

Thanks in advance.

อวตาร
ละทิ้ง
คำตอบที่ดีที่สุด

Hi,

You can use the following code to raise a pop-up

HTML:

<button id="popupButton">Click Me</button>
<div id="popupBlock" class="hidden">
  <!-- Content of the popup goes here -->
  <p>This is the popup content.</p>
</div>




CSS:
#popupBlock {
  display: none; /* Initially hidden */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
}

Javascript:

<script>
const popupButton = document.getElementById('popupButton');
const popupBlock = document.getElementById('popupBlock');

popupButton.addEventListener('click', function() {
popupBlock.classList.toggle('hidden');
  });
</script>




Hope it helps

อวตาร
ละทิ้ง
Related Posts ตอบกลับ มุมมอง กิจกรรม
2
มี.ค. 15
3606
1
มี.ค. 20
13620
0
ธ.ค. 19
2562
7
ธ.ค. 24
25786
0
มี.ค. 15
4245