I have a div element set to appear once an image is clicked. The div is also draggable, once it appears and this all functions fine. When I click the image, however, the div always appears in the far bottom left corner of the page, how can I change its starting position to the centre of the page without completely messing up my working JS? Hopefully, there's a simple CSS position fix I'm missing - I'm relatively new to html/css/js.

HTML:

  <div>
          <a href="#/" 
            ><img  src="images/arrow-in-intro.svg" alt="arrow"
          /></a>
        </div>
        <!-- Draggable DIV -->
        <div  id="mydiv">
          <div id="mydivheader">System Message</div>
          <p>Critical Error</p>
          <button onclick="window.location.href='/main.html'">Ok</button>
        </div>

CSS:

 #mydiv {
      position: absolute;
      z-index: 999;
      background-color: #afafaf;
      border: 2px solid #8c8c8c;
      text-align: center;
      font-family: "Courier New", Courier, monospace;
      font-weight: 400;
      width: 200px;
    }
    
    #mydivheader {
      padding: 10px;
      cursor: move;
      z-index: 10;
      background-color: #0000a4;
      color: rgb(255, 255, 255);
    }
    
    .mydiv {
      opacity: 0;
    }
    
    .mydiv.show {
      opacity: 1;
    }

JS:

<script>
      var elementToClick = document.querySelector(".toggler");
      var elementToShow = document.querySelector(".mydiv");

      if (elementToClick) {
        elementToClick.addEventListener("click", showElement);
      }

      function showElement() {
        elementToShow.classList.add("show");
      }
    </script>

    <script>
      // Make the DIV element draggable:
      dragElement(document.getElementById("mydiv"));

      function dragElement(elmnt) {
        var pos1 = 0,
          pos2 = 0,
          pos3 = 0,
          pos4 = 0;
        if (document.getElementById(elmnt.id   "header")) {
          // if present, the header is where you move the DIV from:
          document.getElementById(elmnt.id   "header").onmousedown =
            dragMouseDown;
        } else {
          // otherwise, move the DIV from anywhere inside the DIV:
          elmnt.onmousedown = dragMouseDown;
        }

        function dragMouseDown(e) {
          e = e || window.event;
          e.preventDefault();
          // get the mouse cursor position at startup:
          pos3 = e.clientX;
          pos4 = e.clientY;
          document.onmouseup = closeDragElement;
          // call a function whenever the cursor moves:
          document.onmousemove = elementDrag;
        }

        function elementDrag(e) {
          e = e || window.event;
          e.preventDefault();
          // calculate the new cursor position:
          pos1 = pos3 - e.clientX;
          pos2 = pos4 - e.clientY;
          pos3 = e.clientX;
          pos4 = e.clientY;
          // set the element's new position:
          elmnt.style.top = elmnt.offsetTop - pos2   "px";
          elmnt.style.left = elmnt.offsetLeft - pos1   "px";
        }

        function closeDragElement() {
          // stop moving when mouse button is released:
          document.onmouseup = null;
          document.onmousemove = null;
        }
      }
    </script>

CodePudding user response：

you could add top: 50%; left: 50%; to #mydiv