Issue
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 class="title" id="title">
</div>
<div hr class="horiz">
<div class="split left">
<div class="centered">
<div class="part">
<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 class="buttons">
<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" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div>
<h1 div class="title" id="title">
</div>
<div class="text-container">
<p class="txt1" id="txt1"> </p>
</div> <br>
<div class="img"> <img id="img" src onerror="this.onerror=null;" style="width:50%"> </div> <br>
<div class="text-container">
<p class="txt2" id="txt2"> </p>
</div> <br>
<div class="video"> <iframe id="idframe" width="600" height="400"> </iframe> </div> <br>
</div>
</div>
</div>
</div>
<div class="split right">
<div class="centered"> <br>
<div class="form">
<form method="post" id="save" action="javascript:myFunction()" class="formEdit">
<h1>Modifica frammento</h1>
<div class="field">
<label for="id">ID :</label>
<input type="number" id="id" name="id" />
</div>
<div class="field">
<label for="id_a">ID Articolo:</label>
<input type="text" id="id_a" name="id_a" />
</div>
<div class="field">
<label for="numero">Numero Frammento:</label>
<input type="number" id="numero" name="numero" />
</div>
<div class="field">
<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 class="field">
<label for="valore">Valore Frammento:</label>
<textarea id="valore" name="valore" rows="5" cols="30"> </textarea>
</div>
<div class="button">
<button type="submit" id="save-btn" class="full">Salva modifiche</button>
<input type="button" id="delete-btn" value="Annulla modifiche"
</div>
</form>
</div>
</div>
</div>Solution
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="" class="horiz">
<div>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal" style="display: block;Z-INDEX: 100;">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div>
<h1 div="" class="title" id="title">
</h1></div>
<div class="text-container">
<p class="txt1" id="txt1"> </p>
</div> <br>
<div class="img"> <img id="img" src="" onerror="this.onerror=null;" style="width:50%"> </div> <br>
<div class="text-container">
<p class="txt2" id="txt2"> </p>
</div> <br>
<div class="video"> <iframe id="idframe" width="600" height="400"> </iframe> </div> <br>
</div>
</div>
</div><div class="split left">
<div class="centered">
<div class="part">
<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 class="buttons">
<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 class="split right">
<div class="centered"> <br>
<div class="form">
<form method="post" id="save" action="javascript:myFunction()" class="formEdit">
<h1>Modifica frammento</h1>
<div class="field">
<label for="id">ID :</label>
<input type="number" id="id" name="id">
</div>
<div class="field">
<label for="id_a">ID Articolo:</label>
<input type="text" id="id_a" name="id_a">
</div>
<div class="field">
<label for="numero">Numero Frammento:</label>
<input type="number" id="numero" name="numero">
</div>
<div class="field">
<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 class="field">
<label for="valore">Valore Frammento:</label>
<textarea id="valore" name="valore" rows="5" cols="30"> </textarea>
</div>
<div class="button">
<button type="submit" id="save-btn" class="full">Salva modifiche</button>
<input type="button" id="delete-btn" value="Annulla modifiche" <="" div="">
</div></form>
</div>
</div>
</div>
</div>
Answered By - Khalil
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.