Question

我正在创建任务。我将每个任务都打印为一个按钮。任务具有标题和注释。每个按钮都有一个模式。模态中将包含任务标题和注释。为什么我要继续获得所有模态的第一个标题和注释？如何显示它们的每个内容？请帮忙。

<html>
<head>

<script src="jquery-1.10.2.min.js"></script>
<style>
body
{
    margin:0;
}
.submitted{
margin:0px;
}
.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;
}
.padding{
padding:20px 60px 60px 60px;
}
.note{
text-align:center;
}
#note{
font-family: Javanese text;
}
.call_modal{
 font-family: myFirstFont;
}
.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;
}
@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0)}}
::-webkit-input-placeholder{
  font-size: 13.4px;
}
.error{
text-align:center;
padding: 170px; 50px; 50px 50px;
}
button
{
padding:20px;
border-radius:5px;
background:#808080;
border:none;
font-size:18px;
color:#fff;
margin:8%;
}
</style>
<script>
$(document).ready(function(){
  $(".call_modal").click(function(){
    $(".modal").fadeIn();
    $(".modal_main").show();
      });
});
$(document).ready(function(){
  $(".close").click(function(){
    $(".modal").fadeOut();
    $(".modal_main").fadeOut();
      });
});
$(document).ready(function(){
  $(".submitted").click(function(){
    $(".modal").fadeOut();
    $(".modal_main").fadeOut();
      });
});
</script>
</head>
<body>
<?php $con=mysqli_connect("localhost","root","","task");?>
<?php $results = mysqli_query($con, "SELECT * FROM note"); ?>
<?php while ($row = mysqli_fetch_array($results)) { ?>

<?php
 echo '&nbsp; &nbsp; &nbsp; &nbsp;';
    echo '<button class="call_modal" style="cursor:pointer;">'. $row['title'] . '</button>';
?>
<?php
}?>
<?php $results = mysqli_query($con, "SELECT title, note FROM note"); ?>
<?php while ($row = mysqli_fetch_array($results)) { ?>
<div class="modal">
<div class="modal_close close"></div>
<div class="modal_main">
<div class="note"> <?php

$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";


if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["comment"])) {
    $comment = "";
  } else {
    $comment = test_input($_POST["comment"]);
  }
}

function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}
?>


<?php
   echo '<br><br>';

       echo '<div class="padding">'.$row['title'].'';
        echo '<br><br><br><br>';
    echo ''.$row['note'].'</div>';
?>



<img src="i783wQYjrKQ.png" class="close" style="line-height: 12px;
     margin-top: 1px;
     margin-right: 2px;
     position:absolute;
     top:0;
     right:0;">
</div>
</div>
<?php
}?>
</body>
</html>

每个按钮在单击时应具有模式，并带有每个按钮的数据

Answer 1

您的所有模态DIV似乎都具有相同的类名“ modal_main”。在您的Java语言中，您只需告诉它显示类'modal_main'的每个元素即可。它怎么知道要显示哪种模式？

您需要为每个模式分配一些唯一的ID或类名，然后让您的JS打开所需的JS。

编辑...

这应该使您走上正确的道路。只要考虑一下您的点击处理程序如何读取数据目标并使用它来打开正确的模式。我也没时间写你的JS：）

<?php 
    $con=mysqli_connect("localhost","root","","task");
    $results = mysqli_query($con, "SELECT * FROM note"); 
    $i = 1;
    while ($row = mysqli_fetch_array($results)) { 
?>
    <button class="call_modal" data-target="<? echo $i; ?>" style="cursor:pointer;"><? echo $row['title']; ?></button>
    <div class="modal" id="modal<? echo $i; ?>">
        <div class="modal_close close"></div>
            <div class="modal_main">
                <div class="note"> 
                    <h2><?php echo $row['title']; ?></h2>
                    <p><?php echo $row['note']; ?></p>
                    <img src="i783wQYjrKQ.png" class="close" style="line-height: 12px; margin-top: 1px; margin-right: 2px; position:absolute; top:0; right:0;">
                </div>
            </div>
        </div>
    </div>
<?php
        $i++;
    }
?>

为什么每个按钮的模态中都没有正确的数据？

1 个答案: