CODEWITHSUNDEEP
javascripthtmlcss
user8822553
user8822553

Reputation:

How to move the modal box down

I am trying to move the modal box itself lower in the screen. I saw a bunch of other answers but none of them worked.

var modal = document.getElementById("myModal");
modal.style.display = "block";
function closeModal() {
  modal.style.display = "none";
}
.modal {
  display: none; /* Hidden by default */
  z-index: 1; /* Sit on top */
  padding-top: -600px; /* Location of the box */
  left: 0;
  top: 0;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <h4 id="pHasNoBlock" style="font-family: 'Press Start 2P'">Did the robot pick up a block at the clicked location?</h4>
    <h4 id="pHasBlock" style="font-family: 'Press Start 2P'; display: none">Did the robot deliver a block at the highlighted location?</h4>
    <button class="modalButtonYes" onclick="closeModal()">Yes</button>
    <button class="modalButtonNo" onclick="closeModal()">No</button> 
  </div>
</div>

I tried using the padding-top element to lower it. This worked on w3schools, but not on my website itself. I am not sure if something else is conflicting or not.

Upvotes: 0

Views: 2184

Answers (1)

JazzBrotha
JazzBrotha

Reputation: 1748

First off, padding-top is not allowed to have a negative value so it won't affect the position of your modal. Read more about padding at MDN.

If you want to position your modal further down on the page, try using position:absolute and set the desired distance from top in px :

var modal = document.getElementById("myModal");
modal.style.display = "block";
function closeModal() {
  modal.style.display = "none";
}
.modal {
  display: none; /* Hidden by default */
  z-index: 1; /* Sit on top */
  left: 50px;
  top: 150px;
  position: absolute;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <h4 id="pHasNoBlock" style="font-family: 'Press Start 2P'">Did the robot pick up a block at the clicked location?</h4>
    <h4 id="pHasBlock" style="font-family: 'Press Start 2P'; display: none">Did the robot deliver a block at the highlighted location?</h4>
    <button class="modalButtonYes" onclick="closeModal()">Yes</button>
    <button class="modalButtonNo" onclick="closeModal()">No</button> 
  </div>
</div>

If you increase or decrease the top value of the modal class, you will see its position move down and up respectively.

Upvotes: 1

Related Questions