javascript - 如何将div的信息放入弹出框中？

Question

我在数据库中的每个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>

Answer 1

因为它对您有帮助，所以我发布评论/示例作为答案，您可能想要更新您的问题，为 future 的读者提供使用您的解决方案更新的初始代码，以便对其他人有所帮助。

您需要使用唯一的 ID 来识别 div/modal，然后使用 jQuery 启动并获取 ID。您可以创建一个模态，然后在点击时传递 ID 参数，或者保持您的方式，但也需要唯一的 ID。

这是一个带有 ID 参数的唯一模态示例:非常基本/简单。在您的情况下，链接将在查询结果循环中生成。

我们将使用 jQuery .attr() -> 单击的属性的值，使用 $(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">&#10006;</div> 
   </div>
  <div class="modal-body">
 </div>
</div>

然后，在 PHP 循环中，回显每个具有数据库中唯一 ID 的链接(注意 jQuery 部分中使用的“data-id”):

<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 并不是真正强制的，因为每个人都会有不同的需求，所以这里没有发布