如何将div的信息放入弹出框? [英] how to take the information of a div into a popup box?

查看：74
本文介绍了如何将div的信息放入弹出框?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在数据库中的每个重要信息中显示，我想要的是，当我单击按钮之一时，在弹出框中显示的div信息，现在只向我显示最后一个div之一.我希望你能帮助我.这是我的代码:

i display in every lign informations that are in the database, what i want is when i click on one of the buttons the informations of the div to show in the popup box, now it only show me the one of the last div i hope you can help me. here is my code:

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>

推荐答案

为您提供帮助，我在此发表了评论/示例作为答案，您可能希望更新您的问题，为将来的读者提供初始代码已随您的解决方案更新，因此可以帮助其他人.

您需要使用需要唯一的ID来标识div/modal ，然后使用jQuery启动并获取该ID.您可以创建一个模式，然后在点击时传递ID参数，或者按照自己的方式进行操作，但也需要唯一的ID.

You need to identify the div/modal with a ID that needs to be unique, then, use jQuery to launch and grab the ID. Either you create one modal, then pass ID param on click, or keep it your way, but need unique ID as well.

这是带有ID参数的唯一模态的示例:非常基本/简单.对于您而言，链接将在查询结果循环中生成.

here's a example of unique modal with ID parameters : very basic/simple. In your case, the links would be generated in the query results loop.

我们将使用 jQuery .attr()->该属性的值单击，使用$(this)进行识别.

We'll use the jQuery .attr() -> value of the attribute that was clicked, using $(this) to identify it.

jQuery

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

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循环中，回显每个具有DB中唯一ID的链接 (请注意jQuery部分中使用的数据ID"):

Then, in the PHP loop, echo each link that will have unique ID from DB (Note the 'data-id' used in jQuery part):

<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并不是强制性的，因为每个人都有不同的需求，因此不在此处发布

这篇关于如何将div的信息放入弹出框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
PHP最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆