【发布时间】：2022-02-12 03:37:07
【问题描述】：
我对模态有一个小问题；它的一部分被右边的div隐藏了。
我有两个拆分，一个在显示表格的左侧，另一个在显示表单的右侧。
在左侧拆分还有一个按钮，“打开模式”，它允许我打开模式。
问题是，一旦模态框打开，它在左侧可见，而模态框最终在右侧拆分的部分被右侧拆分隐藏。
请参阅图以获得进一步说明。
// 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>【问题讨论】：