Fatal编程技术网
  • javascript/
  • Javascript 如何将div的信息放入弹出框中？

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

javascript php jquery

Javascript 如何将div的信息放入弹出框中？,javascript,php,jquery,Javascript,Php,Jquery,我显示在数据库中的每个lign信息中，我想要的是当我点击其中一个按钮时，该div的信息将显示在弹出框中，现在它只显示最后一个div中的一个，我希望您能帮助我。这是我的密码： css: html 救生 .med：悬停输入[type=“submit”] { 可见性：可见！重要； } 函数popup（）{ $（“.modal”）.fadeIn（）； $（“.modal_main”）.show（）； $（“.close”）。单击（函数（）{ $（“.modal”）.fadeOut（）； $（“.mod

我显示在数据库中的每个lign信息中，我想要的是当我点击其中一个按钮时，该div的信息将显示在弹出框中，现在它只显示最后一个div中的一个，我希望您能帮助我。这是我的密码：

css:

html


救生
.med：悬停输入[type=“submit”]
{
可见性：可见！重要；
}
函数popup（）{
$（“.modal”）.fadeIn（）；
$（“.modal_main”）.show（）；
$（“.close”）。单击（函数（）{
$（“.modal”）.fadeOut（）；
$（“.modal_main”）.fadeOut（）；
});
}  
函数popup2（）{
$（“.modal”）.fadeIn（）；
$（“.modaltwo”）.show（）；
$（“.close”）。单击（函数（）{
$（“.modal”）.fadeOut（）；
$（“.modaltwo”）.fadeOut（）；
});
}
函数popup3（）{
$（“.modal”）.fadeIn（）；
$（“.modalthree”）.show（）；
$（“.close”）。单击（函数（）{
$（“.modal”）.fadeOut（）；
$（“.modalthree”）.fadeOut（）；
});
}
勒梅德辛酒店

你的约会日期
由于它对您有所帮助，我将评论/示例作为答案发布，您可能希望更新您的问题，为未来的读者提供使用您的解决方案更新的初始代码，从而帮助其他人

您需要使用需要唯一的ID标识div/modal，然后使用jQuery启动并获取ID。您可以创建一个modal，然后单击传递ID参数，也可以按自己的方式传递，但也需要唯一的ID

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

我们将使用单击的属性的->值，使用
$（this）
来标识它

jQuery

HTML


✖

然后，在PHP循环中，从DB回显每个具有唯一ID的链接 （请注意jQuery部分中使用的“数据id”）：
CSS并不是强制性的，因为每个人都有不同的需求，所以它没有发布在这里，因为它帮助了你，我将评论/示例作为答案发布，你可能想更新你的问题，为未来的读者提供用你的解决方案更新的初始代码，所以它可以帮助其他人

您需要使用需要唯一的ID标识div/modal，然后使用jQuery启动并获取ID。您可以创建一个modal，然后单击传递ID参数，也可以按自己的方式传递，但也需要唯一的ID

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

我们将使用单击的属性的->值，使用
$（this）
来标识它

jQuery

HTML


✖

然后，在PHP循环中，从DB回显每个具有唯一ID的链接 （请注意jQuery部分中使用的“数据id”）：
CSS不是强制性的，因为每个人都有不同的需求，所以这里没有发布它

您需要使用需要唯一的ID标识div/modal，然后使用jQuery启动并获取ID。或者您创建一个modal，然后单击传递ID param，或者按自己的方式进行，但是也需要唯一的ID我考虑过这个，但我不知道如何给出它和ID，你能帮我吗？下面是一个ID参数为->的唯一模式示例（运行F9查看效果）。非常基本/简单：在您的例子中，链接将在查询结果循环中生成。看看它是否有帮助，如果有，我会设置一个快速修复你的代码谢谢我使用了这个函数，并做了一些更改，这样我就可以收到我需要的变量谢谢！谢谢！！！！不客气，很高兴能帮上忙。。。您可能希望更新您的问题，以便稍后它将有助于其他人（请参阅答案中的注释），并关闭此问题。happy coding^^您需要使用需要唯一的ID标识div/modal，然后使用jQuery启动并获取ID。或者您创建一个modal，然后单击传递ID param，或者按自己的方式传递ID param，但也需要唯一的ID我考虑过这个，但不知道如何给出它和ID，你能帮我一下吗？下面是一个ID参数为->的独特模态的示例（运行F9查看效果）。非常基本/简单：在您的例子中，链接将在查询结果循环中生成。看看它是否有帮助，如果有，我会设置一个快速修复你的代码谢谢我使用了这个函数，并做了一些更改，这样我就可以收到我需要的变量谢谢！谢谢！！！！不客气，很高兴能帮上忙。。。您可能希望更新您的问题，以便稍后它将有助于其他人（请参阅答案中的注释），并关闭此问题。快乐编码^^ 
* {
    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)}}

<?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>

 $(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"});
 });

 });

<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>

<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>