Почему я не могу иметь правильные данные в модале каждой кнопки? - PullRequest
Новая
       6

Почему я не могу иметь правильные данные в модале каждой кнопки?

0 голосов
/ 26 января 2019

Я создаю задачу. Я напечатал каждую задачу, чтобы быть кнопкой. Задача имеет заголовок и примечание. У каждой кнопки будет модал. Внутри модальной будет название задачи и примечание. Почему я продолжаю получать первый заголовок и примечание для всех модальностей? Как я могу отобразить каждое их содержимое? Пожалуйста, помогите. 

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

Каждая кнопка должна быть модальной при нажатии и с данными для каждой кнопки

1 Ответ

0 голосов
/ 26 января 2019

Похоже, что все ваши модальные DIV имеют одно и то же имя класса 'modal_main'.В вашем Javascript вы просто указываете ему показывать каждый элемент с классом 'modal_main'.Как он узнает, какой модал отображать?

Вам нужно будет присвоить какой-то уникальный идентификатор или имя класса каждому модалу, а затем пусть ваш 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++;
    }
?>
...