'how to center modal and have it come underneath the link button?

I have a front page that has 4 links, and each link is suppose to open up a modal. However for instance on the first link 'Vente' in my code the modal only comes up at the top of the page and only stays on half of the page with its background. I am having a hard time positioning the modal in the middle and underneath the links buttons with the close button to the left.

I added both the Html and Css.

HTML

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">

  <title>Nina Beaute BI</title>
</head>

<body>
  <div class="square rounded p-5  border border-secondary">
    <img src="img/BELIVOIR.png" alt="Nina Beaute" class="center" style="width:200px;">
    <ul class="list">
      <li><button class="myBtn_multi">Vente</button></li>
      <li><button class="myBtn_multi">Inventaire</button></li>
      <li><button id="myBtn2">Achat</button><li>
      <li><button id="myBtn3">Finance</button></li>
    </ul>

    <!-- The Modal -->
<div class="modal modal_multi">

    <!-- Modal content -->
    <div class="modal-content">
        <span class="close close_multi">×</span>
        <p>Some text in the Modal..</p>
    </div>

</div>

<!-- The Modal -->
<div  class="modal modal_multi">

    <!-- Modal content -->
    <div class="modal-content">
        <span class="close close_multi">×</span>
        <p>Some text in the Modal..2</p>
    </div>

</div>


    <p class="text-center" style="font-family:helvetica; font-size:20px;">Bonjour</p>
    <p class="text-center" style="font-family:helvetica; font-size:45px;">Bienvenue a Nina Beaute BI</p>
    <a href="operation.html"><img src="img/Get_Started_Button.png" alt="Get Started" class="center" style="width:250px; padding-top:40px">

  </div>

  <script>
    // Get the modal

    var modalparent = document.getElementsByClassName("modal_multi");

    // Get the button that opens the modal

    var modal_btn_multi = document.getElementsByClassName("myBtn_multi");

    // Get the <span> element that closes the modal
    var span_close_multi = document.getElementsByClassName("close_multi");

    // When the user clicks the button, open the modal
    function setDataIndex() {

        for (i = 0; i < modal_btn_multi.length; i++)
        {
            modal_btn_multi[i].setAttribute('data-index', i);
            modalparent[i].setAttribute('data-index', i);
            span_close_multi[i].setAttribute('data-index', i);
        }
    }



    for (i = 0; i < modal_btn_multi.length; i++)
    {
        modal_btn_multi[i].onclick = function() {
            var ElementIndex = this.getAttribute('data-index');
            modalparent[ElementIndex].style.display = "block";
        };

        // When the user clicks on <span> (x), close the modal
        span_close_multi[i].onclick = function() {
            var ElementIndex = this.getAttribute('data-index');
            modalparent[ElementIndex].style.display = "none";
        };

    }

    window.onload = function() {

        setDataIndex();
    };

    window.onclick = function(event) {
        if (event.target === modalparent[event.target.getAttribute('data-index')]) {
            modalparent[event.target.getAttribute('data-index')].style.display = "none";
        }

        // OLD CODE
        if (event.target === modal) {
            modal.style.display = "none";
        }
    };


</script>



  <!-- Optional JavaScript; choose one of the two! -->

  <!-- Option 1: Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

  <!-- Option 2: Separate Popper and Bootstrap JS -->
  <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
</body>

</html>

CSS

div{

  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  width: 50%;
}

ul {
  padding-top:10px;
  padding-bottom: 100px;
}

li {
    float: left;
    width:25%;
    text-align:center;
    list-style-type: none;
    border-right:2px solid;
}

button {
  background-color: none;
  border: none;
  color: blue;
  text-decoration: underline;
  background-color: white;
  font-family:helvetica;
  font-size:20px;
}

.list li:last-child {
    border-right:none;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}


/* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 100px; /* Location of the box */
            left: 10;
            top: 10;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            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 */
        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }

        /* The Close Button */
        .close {
            color: #aaaaaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }
javascripthtmlcss


Solution 1:[1]

https://dotnetfiddle.net/zZEAMT Here is a view.

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <style>
        .theStyle {
            z-index: 1;
            left: 50px;
            top: 350px; /*<-----adjust height*/
            position: absolute;
            overflow: auto;
        }

        .list li:last-child {
            border-right: none;
        }

        ul {
            padding-top: 10px;
            padding-bottom: 100px;
        }

        li {
            float: left;
            width: 25%;
            text-align: center;
            list-style-type: none;
            border-right: 2px solid;
        }

        button {
            background-color: none;
            border: none;
            color: blue;
            text-decoration: underline;
            background-color: white;
            font-family: helvetica;
            font-size: 20px;
        }
    </style>
    <meta name="viewport" content="width=device-width" />
    <title>Index2005</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="square rounded p-5  border border-secondary">
        <ul class="list">
            <li><button style="margin-bottom: 20px;" class="btn  btn-default" data-toggle="modal" data-target="#myModal">Vente</button></li>
            <li><button style="margin-bottom: 20px;" class="btn  btn-default" data-toggle="modal" data-target="#myModal">Inventaire</button></li>
            <li><button style="margin-bottom: 20px;" class="btn  btn-default" data-toggle="modal" data-target="#myModal">Achat</button></li>
            <li><button style="margin-bottom: 20px;" class="btn  btn-default" data-toggle="modal" data-target="#myModal">Finance</button></li>
        </ul>
    </div>
    <div class="modal fade" id="myModal" role="dialog" data-backdrop="false">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content  theStyle">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">The Title</h4>
                </div>
                <div class="modal-body">
                    Hello World
                </div>
            </div>

        </div>
    </div>
</body>
</html>

Solution 2:[2]

Maybe the following can help you out:

.modal {
    transform: translate(0px, 0px);
}
.modal-content {
  margin: auto; /* <- remove this */
}

Solution 3:[3]

.modal{
   left: 50%;
   top: 50%;
}

add this and remove margin:auto from modal-content.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 mptr
Solution 3 lkhadirn

Related Questions