【发布时间】：2016-08-03 14:18:45
【问题描述】：
我正在创建一个可编辑的日历，与 Gmail 中的日历非常相似。它是一个由div 框组成的网格，每个div 框都可以单击，然后会弹出一个模态框，用户可以在其中编辑/添加数据到该特定条目。
我的 For 循环中的 Modal 有一个小问题。我知道用于 Div 的 ID 必须是唯一的，但我的变量 $i 将在 div id="myBtn' . $i . '" 内准确地 echo 但在 div id="myModal' . $i . '" 内不准确，这同样适用于从我的数据库中检索数据.在“myBtn”div 内准确，但在“myModal”div 内不准确。
此外，当我将代码设置为 div id="myModal' . $i . '" 时打开模态框后，我无法关闭它，但当它只是 div id="myModal" 时，它运行良好，但数据是错了。
我阅读了与我的问题类似的其他帖子，但似乎找不到有效的解决方案。我做错了什么？
<?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);
}
?>
不是很相关，但这是与上述代码一起使用的style 标签：
<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>
【问题讨论】：
标签： php mysqli while-loop modal-dialog