I'm having a small problem with the modal; part of it is hidden by the right div.
I have two splits, one on the left where the table is shown and the other on the right where a form is shown.
On the left split there is also a button, "Open modal", which allows me to open the modal.
The problem is that once the modal is open, it is visible on the left side, while the part of the modal that ends up on the right split is hidden by the right split.
See figure for further clarification.
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}.split {
height: 100%;
position: fixed;
z-index: 1;
top: 30;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
width: 40%;
background-color: whitesmoke;
}
.right {
right: 0;
width: 60%;
background-color: ghostwhite;
}
.centered {
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.centered table {
width: 300px;
}
table,
th,
td {
border: 1px solid black;
}
.buttons {
display: flex;
}
.buttons form {
margin: 0 10px;
}
.part {
width: 200px;
padding: 5px;
border: 1px solid gray;
margin: 0;
margin-bottom: 20px;
}
/* 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: 0;
top: 0;
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;
}<div id="title">
</div>
<div hr >
<div >
<div >
<div >
<h3>Parti dell'articolo</h3>
</div>
<table id="my-table" width="90%">
<tr>
<th>Numero</th>
<th>Tipo</th>
<th>Seleziona</th>
</tr>
</table>
<br><br>
<div >
<form action="creaFrammento.html">
<input type="submit" value="Aggiungi parte articolo" />
</form>
<input type="button" value="Elimina parti articolo" onclick="confirmation()" />
</div>
</div>
<div>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" >
<!-- Modal content -->
<div >
<span >×</span>
<div>
<h1 div id="title">
</div>
<div >
<p id="txt1"> </p>
</div> <br>
<div > <img id="img" src one rror="this.onerror=null;" style="width:50%"> </div> <br>
<div >
<p id="txt2"> </p>
</div> <br>
<div > <iframe id="idframe" width="600" height="400"> </iframe> </div> <br>
</div>
</div>
</div>
</div>
<div >
<div > <br>
<div >
<form method="post" id="save" action="javascript:myFunction()" >
<h1>Modifica frammento</h1>
<div >
<label for="id">ID :</label>
<input type="number" id="id" name="id" />
</div>
<div >
<label for="id_a">ID Articolo:</label>
<input type="text" id="id_a" name="id_a" />
</div>
<div >
<label for="numero">Numero Frammento:</label>
<input type="number" id="numero" name="numero" />
</div>
<div >
<label for="tipo">Tipo Frammento:</label>
<select name="tipo" id="tipo" form="tipoform">
<option value="Titolo">Titolo</option>
<option value="Testo">Testo</option>
<option value="Immagine">Immagine</option>
<option value="Video youtube">Video youtube</option>
</select>
</div>
<div >
<label for="valore">Valore Frammento:</label>
<textarea id="valore" name="valore" rows="5" cols="30"> </textarea>
</div>
<div >
<button type="submit" id="save-btn" >Salva modifiche</button>
<input type="button" id="delete-btn" value="Annulla modifiche"
</div>
</form>
</div>
</div>
</div>CodePudding user response：
The elements with higher value of z-index appear on top of elements with lower value of z-index.
You need to take the div wrapping the .modal out of the .left div. Also add z-index to the .modal like so:
.modal {
z-index: 999;
}
<div hr="" >
<div>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" style="display: block;Z-INDEX: 100;">
<!-- Modal content -->
<div >
<span >×</span>
<div>
<h1 div="" id="title">
</h1></div>
<div >
<p id="txt1"> </p>
</div> <br>
<div > <img id="img" src="" one rror="this.onerror=null;" style="width:50%"> </div> <br>
<div >
<p id="txt2"> </p>
</div> <br>
<div > <iframe id="idframe" width="600" height="400"> </iframe> </div> <br>
</div>
</div>
</div><div >
<div >
<div >
<h3>Parti dell'articolo</h3>
</div>
<table id="my-table" width="90%">
<tbody><tr>
<th>Numero</th>
<th>Tipo</th>
<th>Seleziona</th>
</tr>
</tbody></table>
<br><br>
<div >
<form action="creaFrammento.html">
<input type="submit" value="Aggiungi parte articolo">
</form>
<input type="button" value="Elimina parti articolo" onclick="confirmation()">
</div>
</div>
</div>
<div >
<div > <br>
<div >
<form method="post" id="save" action="javascript:myFunction()" >
<h1>Modifica frammento</h1>
<div >
<label for="id">ID :</label>
<input type="number" id="id" name="id">
</div>
<div >
<label for="id_a">ID Articolo:</label>
<input type="text" id="id_a" name="id_a">
</div>
<div >
<label for="numero">Numero Frammento:</label>
<input type="number" id="numero" name="numero">
</div>
<div >
<label for="tipo">Tipo Frammento:</label>
<select name="tipo" id="tipo" form="tipoform">
<option value="Titolo">Titolo</option>
<option value="Testo">Testo</option>
<option value="Immagine">Immagine</option>
<option value="Video youtube">Video youtube</option>
</select>
</div>
<div >
<label for="valore">Valore Frammento:</label>
<textarea id="valore" name="valore" rows="5" cols="30"> </textarea>
</div>
<div >
<button type="submit" id="save-btn" >Salva modifiche</button>
<input type="button" id="delete-btn" value="Annulla modifiche" <="" div="">
</div></form>
</div>
</div>
</div>
</div>
CodePudding user response：
Please change position of modal from fixed to relative.
.modal {
display: none;
/* Hidden by default */
position: relative;
..... rest keep the same only changed position to relative
}