Ich erstelle einen bearbeitbaren Kalender, sehr ähnlich dem in Gmail. Es ist ein Raster von div Boxen, und jede div Box kann angeklickt werden und ein Modal wird angezeigt, wo der Benutzer Daten zu diesem bestimmten Eintrag bearbeiten/hinzufügen kann.PHP For Loop, Modal und MySQL Daten
Ich habe ein kleines Problem mit meinem Modal in meiner For-Schleife. Ich verstehe, dass die IDs für die Divs müssen eindeutig sein, aber meine Variable wird echo genau innerhalb divid="myBtn' . $i . '" aber nicht genau innerhalb divid="myModal' . $i . '" und das gleiche gilt für das Abrufen von Daten aus meiner Datenbank. Genau innerhalb der "myBtn" div aber nicht der "myModal" div.
Zusätzlich kann ich schließe nicht aus der Modal, sobald ich es öffnen, wenn ich den Code zu divid="myModal' . $i . '" gesetzt haben, aber wenn es nur divid="myModal" ist es funktioniert gut, aber die Daten sind falsch.
Ich lese die anderen Beiträge ähnlich wie mein Problem, aber konnte nicht scheinen, eine funktionierende Lösung zu finden. Was mache ich falsch?
<?php
for($i = 0; $i <= 365; $i++){
$d=strtotime($i . " Day");
$day = date("l (m/d)", $d);
$end_month = date("l (m/01)", $d);
$str = strcmp($day, $end_month);
$query_date = date("m/d/Y l", $d);
$sql = "SELECT * FROM XXXXXXXX WHERE date = '$query_date' AND user_id = 1 ORDER BY start_time ASC";
$result = mysqli_query($connection, $sql);
while($row = mysqli_fetch_array($result)){
$entry_id = $row['entry_id'];
$schedule_date = date("l (m/d)", strtotime($row['date']));
$location_name .= "<strong>" . $row['location_name'] . "</strong><br/>(" . $row['start_time'] . " - " . $row['end_time'] . ")<br/><br/>";
}
$test = strcmp($day, $schedule_date);
if($str == 0){
echo '<div id="myBtn' . $i . '" class="menu2" style="width: 100%;">' . date("F", $d) . '</div>';
}
echo '
<!-- The Modal -->
<form action="" name="add-location" method="POST">
<div id="myModal' . $i . '" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p style="color: black;">' . $i . '</p>
<input type="text" name="" class="booking_input" style="width: 100%;" placeholder="' . $i . '"/>
<input type="submit" name="submit" class="button" style="vertical-align: middle; line-height: 15px;" />
</div>
</div>
</form>';
echo '<div id="myBtn' . $i . '" class="menu2" style="text-align: center;"><span style="font-size: 16px; color: #c11414;"><strong><u>' . $day . $i . '</u></strong></span></br/><br/>';
if($test == 0){
echo $location_name . "<br/>";
}
echo "</div>";
?>
<script>
// Get the modal
var modal = document.getElementById('myModal<?php echo $i; ?>');
// Get the button that opens the modal
var btn = document.getElementById("myBtn<?php echo $i; ?>");
// 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";
}
}
</script>
<?php
unset($location_name);
unset($address);
unset($start_time);
unset($end_time);
}
?>
nicht sehr relevant, aber hier ist der style-Tag mit dem obigen Code zu gehen:
<style>
* {
box-sizing: border-box;
}
.header {
border: .5px solid #2f363e;
padding: 15px;
}
.menu2 {
width: 14.28%;
float: left;
padding: 15px;
border: .5px solid #2f363e;
height: 150px;
color: #2f363e;
}
.main {
width: 75%;
float: left;
padding: 15px;
border: .5px solid #2f363e;
}
</style>
<style>
/* 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;
z-index: 1;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
z-index: 1;
}
</style>
Dies hat den Trick perfekt, vielen Dank! Mein Javascript Wissen ist eher schlecht ... @Glufu – Shane