Ask coding questions

← Back to all posts
How would I make a UI pop-up
h
headiscoding (943)

For a game im making, I want to make it so that when you click the (in this case urmom), a +1 text pops up on the screen and fades away. thanks. OH YEAH THIS IS IN HTML, CSS, AND JS BTW

Answered by RYANTADIPARTHI (6006) [earned 5 cycles]
View Answer
Comments
hotnewtop
RYANTADIPARTHI (6006)

Try uring bootstrap:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
Coder100 (16758)

Something like:

<button id="open-modal">Click me</button>

<div id="popup">This is a popup!</div>

just add some css to make:

#popup {
  display: none;
}

and your js:

document.getElementById("open-modal", () => {
  document.getElementById("popup").style.display = "block";
})