我显示在数据库中的每个lign信息中，我想要的是当我点击其中一个按钮时，在弹出框中显示div的信息，现在它只显示最后一个div中的一个我希望你能帮助我。这是我的代码：
的CSS：
* {
margin: 0;
padding: 0;
}
body {
background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(img/695586.jpg);
height: 100vh;
background-position: center;
background-size: cover;
overflow:hidden;
}
/*#contenaire{
position:absolute;
margin-top:15%;
width: 100%;
height:auto;
}*/
.cont{
position:relative;
width:95%;
height:450px;
margin: auto;
margin-top:4%;
background:rgba(0,0,0,0.3);
border-radius:20px;
box-shadow: 0px 0px 12px rgba(88, 83, 74, .7);
padding: 20px 0px 20px 20px;
overflow-y: scroll;
overflow-x: hidden;
}
.med{
position:relative;
width:96%;
height:7%;
margin: auto;
margin-top:10px;
/*background:rgba(0,0,0,0.3);*/
background-color: azure;
border-radius:20px;
padding: 5px 16px 5px 20px;
}
.Column
{
width: 10%;
margin-top: 5px;
float: left;
}
.btn{
display:block;
padding:5px;
border-radius:7px;
background-color:#fff;
color:#000;
font-size:15px;
margin-right: 10px;
box-shadow:0px 0px 5px #fff;
visibility: hidden;
}
.btn:hover{
color:cadetblue;
border-bottom: 2px solid Black;
transition: all 0.5s ease-in;
}
/*::-webkit-scrollbar
{
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track
{
background: rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb
{
background: rgba(0, 0, 0, 0.5);
}
*/
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
.liens{
float:left;
width:100px;
height: 100px;
/*background-color:antiquewhite;*/
position:relative;
width:20%;
height:auto;
margin-left: 2%;
margin-right: 2%;
background:rgba(0,0,0,0.3);
border-radius:20px;
box-shadow: 0px 0px 12px rgba(88, 83, 74, .7);
padding: 20px 0px 20px 20px;
}
.liens{
list-style: none;
}
.liens li a{
/*color: #000;*/
color: #d9dcdb;
text-decoration: none;
font-size: 120%;
font-weight: bold;
}
.liens li a:hover{
color:cadetblue;
border-bottom: 2px solid cadetblue;
transition: all 0.5s ease-in;
}
.formulaire{
float:left;
height: auto;
width: 70%;
background-color:snow;
position:relative;
border-radius:20px;
padding: 20px 20px 30px 20px;
color: black;
}
.titre{
position: relative;
height: 40px;
width: 100%;
border-radius: 5px;
}
.modal
{
width:100%;
height:100%;
position:fixed;
top:0;
display:none;
}
.modal_close
{
width:100%;
height:100%;
background:rgba(0,0,0,.8);
position:fixed;
top:0;
}
.close
{
cursor:pointer;
}
.modal_main
{
width:50%;
height:400px;
background:#fff;
z-index:4;
position:fixed;
top:16%;
border-radius:4px;
left:24%;
display:none;
-webkit-animation-duration: .5s;
-webkit-animation-delay: .0s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
-webkit-backface-visibility: visible!important;
-webkit-animation-name: fadeInRight;
}
.modaltwo
{
width:50%;
height:400px;
background:#fff;
z-index:4;
position:fixed;
top:16%;
border-radius:4px;
left:24%;
display:none;
-webkit-animation-duration: .5s;
-webkit-animation-delay: .0s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
-webkit-backface-visibility: visible!important;
-webkit-animation-name: fadeInRight;
}
.modalthree{
width:50%;
height:400px;
background:#fff;
z-index:4;
position:fixed;
top:16%;
border-radius:4px;
left:24%;
display:none;
-webkit-animation-duration: .5s;
-webkit-animation-delay: .0s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
-webkit-backface-visibility: visible!important;
-webkit-animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0)}}
HTML
<?php
// Start the session
ob_start();
session_start();
// Check to see if actually logged in. If not, redirect to login page
if (!isset($_SESSION['loggedIn']) || $_SESSION['loggedIn'] == false) {
header("Location: index.php");
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/formulaire.css" rel="stylesheet" type="text/css">
<title>LifeCare</title>
<style type="text/css">
.med:hover input[type="submit"]
{
visibility:visible !important;
}
</style>
<script src="jquery-1.10.2.min.js"></script>
<script>
function popup(){
$(".modal").fadeIn();
$(".modal_main").show();
$(".close").click(function(){
$(".modal").fadeOut();
$(".modal_main").fadeOut();
});
}
function popup2() {
$(".modal").fadeIn();
$(".modaltwo").show();
$(".close").click(function(){
$(".modal").fadeOut();
$(".modaltwo").fadeOut();
});
}
function popup3() {
$(".modal").fadeIn();
$(".modalthree").show();
$(".close").click(function(){
$(".modal").fadeOut();
$(".modalthree").fadeOut();
});
}
</script>
</head>
<?php
require 'header.php';
$id_g = $_SESSION['id_g'];
$id_p = $_SESSION['id_p'];
?>
<body>
<?php
$req = $conn->prepare("SELECT Nom, Prenom, Type, Adresse from medecin");
$req->execute();
$donnees = $req->fetchAll();
?>
<div class="cont">
<?php
foreach($donnees as $donnees){
?>
<div class="med">
<div class="Column"><?php echo $donnees['Nom']; ?></div>
<div class="Column" ><?php echo $donnees['Prenom']; ?></div>
<div class="Column"><?php echo $donnees['Type']; ?></div>
<div class="Column"><?php echo $donnees['Adresse']; ?></div>
<input type="submit" class="btn" value="Annuler rendez-vous" style="float: right;" onclick="popup(); return false;">
<input type="submit" class="btn" value="Modifier rendez-vous" style="float: right;" onclick="popup2(); return false;">
<input type="submit" class="btn" value="Prendre rendez-vous" style="float: right;" onclick="popup3(); return false;">
<div class="modal">
<div class="modal_close close"></div>
<div class="modal_main">
<img src="i783wQYjrKQ.png" class="close" style="margin-top:13px;left:96%;position:fixed;">
<input type="submit" style="margin-top:32px;">
</div>
<div class="modaltwo">
<img src="i783wQYjrKQ.png" class="close" style="margin-top:13px;left:96%;position:fixed;">
<input type="submit" value="salut" style="margin-top:32px;">
</div>
<div class="modalthree">
<img src="i783wQYjrKQ.png" class="close" style="margin-top:13px;left:96%;position:fixed;">
<p> le medecin <?php echo $donnees['Nom']; ?> </p>
<label style="margin-top:32px;">Date du rendez-vous</label>
<input type="date" style="margin-top:32px;">
</div>
</div>
</div>
<?php } ?>
</div>
</body>
答案 0 :(得分：0)
因为它帮助了你，我发布了评论/示例作为答案，你可能想要更新你的问题，为未来的读者提供更新的解决方案的初始代码，这样可以帮助其他人。
您需要使用需要唯一的ID来识别div / modal ，然后使用jQuery启动并获取ID。您可以创建一个模态，然后在点击时传递ID参数，或者按照您的方式保存，但也需要唯一的ID。
这里是ID参数的唯一模态示例：非常基本/简单。在您的情况下，链接将在查询结果循环中生成。
我们将使用jQuery .attr() - ＆gt;单击的属性的值，使用$(this)来标识它。
的jQuery
$(document).ready(function() {
$(".modal-trigger").click(function(e){
// on click, we grab ID of the link
e.preventDefault();
dataIDModal = $(this).attr("data-id"); // this is the unique ID needed
// HTML links will have a 'data-id' containing what you need from PHP
$("#modal").css({"display":"block"}); // display the modal
$("#modal > .modal-box >.modal-body").load("modal-content.inc.php?id="+dataIDModal);
// the line above is used to load php page in the modal body
// PHP will extract data from DB with the selected ID using GET
});
$(".close-modal, .modal-sandbox").click(function(){
// click on 'close' or 'overlay' will close the modal
$(".modal").css({"display":"none"});
});
});
HTML
<div class="modal" id="modal">
<div class="modal-sandbox"></div>
<div class="modal-box">
<div class="modal-header">
<div class="close-modal">✖</div>
</div>
<div class="modal-body">
</div>
</div>
然后，在PHP循环中，回显将具有来自DB的唯一ID的每个链接 （注意jQuery部分中使用的＆＃39; data-id＆＃39;）
<a href="#" class="modal-trigger" data-id="<?php echo"$my_unique_ID_from_DB"; ?>">Load Modal with ID <?php echo"$my_unique_ID_from_DB"; ?></a>
CSS并非真正强制性，因为任何人都有不同的需求，所以它不会在这里发布