Мне было интересно, как лучше всего создать всплывающее окно с фиксированным верхним / нижним колонтитулом, а затем я передаю данные (возможно, функцию?) В него, и оно заполняет окно. У меня есть много разных вещей на разных страницах, которые я хотел бы иметь во всплывающем окне (вроде как в Facebook), и верхний / нижний колонтитулы всегда будут одинаковыми, но фактический контент изменится.
Каков наилучший способ достичь этого? В настоящее время я работаю над 1-й страницей в цикле PHP, но я хочу, чтобы она была на каждой странице, и я хочу знать, как лучше всего это сделать, не усложняя жизнь.
Вотмой CSS
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 8888; /* Sit on top */
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/Box */
.modal-content {
background-color: #fefefe;
margin: 10vh auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 90%; /* Could be more or less, depending on screen size */
}
@media (min-width: 1366px) {
.modal-content {
background-color: #fefefe;
margin: 10vh auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 50%; /* Could be more or less, depending on screen size */
}
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
Вот моя таблица, которая содержит данные и проходит через мои данные MySQL
<table>
<tr style="background-color: #a8a8a8;">
<th>Sender</th>
<th>Subject</th>
<th>Status</th>
<th></th>
<th></th>
</tr>
<?php
$i = 0;
include '../../includes/connection.php';
$mailResult = $mailSTMT ->fetchAll();
foreach($mailResult as $mailRow) {
$user_mail_from_id = $mailRow['user_mail_from'];
//Use Mail ID to retrieve the User who sent the original message
$mailUserSTMT = "SELECT `user_details_id`, `user_details_first_name`, `user_details_last_name` FROM `user_details` WHERE `user_details_id` = :id";
$mod = "mod".$i;
$fetchList = $dbh->prepare($mailUserSTMT);
$fetchList->bindValue(':id', $user_mail_from_id);
$fetchList->execute();
$mailUserRow = $fetchList->fetch(PDO::FETCH_ASSOC);
$mailFromFullName = $mailUserRow['user_details_first_name']." ".$mailUserRow['user_details_last_name'];
if ($mailRow['user_mail_opened'] == "no") { $bgColor = "#d1d1d1"; $txtColor = "black"; } else { $bgColor = "white"; $txtColor = "black"; }
$mailStatus = ucfirst($mailRow['user_mail_status']);
echo "<tr style='word-wrap: break-word; text-align:center; color: ".$txtColor."; background-color: ".$bgColor."' class='delete_mem".$mailRow['user_mail_id']."'>";
echo "<td>".$mailFromFullName."</td>";
echo "<td>".$mailRow['user_mail_subject']."</td>";
echo "<td><button class='button-primary' style='text-align:center; color:white; background-color: ".$mailStatus."'>".$mailStatus."</button></td>";
echo "<td><button class='button button-primary' data-modal='".$mod."'>Open Message</button></td>";
echo "<td>
<a id='".$mailRow['user_mail_id']."' class='button button-primary btn btn-danger'>Delete</a>
</td>";
echo "</tr>";
?>
<div id="<?php echo $mod; ?>" class="modal">
<div class="modal-content">
<div class="contact-form">
<a class="close">×</a>
<h2><b>Subject: </b><?= $mailRow['user_mail_subject']; ?></h2>
<p><span style="float: left;">From: <?= $mailFromFullName; ?></span><span style="float: right;">Urgency: <span style="color:<?= $mailStatus; ?>"><?= $mailStatus; ?></span></span></p>
<br>
<hr>
<br>
<h5>Message</h5>
<p><?= $mailRow['user_mail_message']; ?></p>
<hr>
<br>
<a href="mail?q=reply?id=<?= $mailRow['user_mail_id']; ?>" class="button button-primary" style="float:right;">Reply</a>
<br><br>
</div>
</div>
</div>
<?php
$i = $i + 1;
}
?>
</table>
Вот мой AJAX
<!-- Mark as Deleted without refreshing the page -->
<script type="text/javascript">
$(document).ready(function() {
$('.btn-danger').click(function() {
var id = $(this).attr("id");
if (confirm("Are you sure you want to delete this email?")) {
$.ajax({
type: "POST",
url: "refresh_mail_delete.php",
data: ({
id: id
}),
cache: false,
success: function(html) {
$(".delete_mem" + id).fadeOut('slow');
}
});
} else {
return false;
}
});
});
</script>
<script type="text/javascript">
var modalBtns = [...document.querySelectorAll(".button")];
modalBtns.forEach(function(btn){
btn.onclick = function() {
var modal = btn.getAttribute('data-modal');
document.getElementById(modal).style.display = "block";
}
});
var closeBtns = [...document.querySelectorAll(".close")];
closeBtns.forEach(function(btn){
btn.onclick = function() {
var modal = btn.closest('.modal');
modal.style.display = "none";
}
});
window.onclick = function(event) {
if (event.target.className === "modal") {
event.target.style.display = "none";
}
}
</script>