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;
}
CodePudding user response：
Maybe the following can help you out:
.modal {
transform: translate(0px, 0px);
}
.modal-content {
margin: auto; /* <- remove this */
}
CodePudding user response：
.modal{
left: 50%;
top: 50%;
}
add this and remove margin:auto from modal-content.
CodePudding user response：
Here is a view. https://dotnetfiddle.net/jKbPOZ <--for solution
@{
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">×</button>
<h4 class="modal-title">The Title</h4>
</div>
<div class="modal-body">
Hello World
</div>
</div>
</div>
</div>
</body>
</html>