Bootstrap модал не отображать исправить - PullRequest
Новая
       10

Bootstrap модал не отображать исправить

0 голосов
/ 02 ноября 2019

Я работаю на странице управления PHP администратора с CRUD. На этой странице мы хотим добавить транспортное средство и отредактировать данные, которые присутствуют в таблице записей SQL, используя модальное поле, которое содержит форму для вставки и обновления данных. Но у меня проблема:

  1. Модальное поле не отображалось. Но я попытался заменить его на модальное окно с чистым HTML и CSS.

  2. Чистое модальное окно работает отлично, но в столбце редактирования таблицы только первая строкаможет отображать все модальные правки, другая строка не отображала модальные.

Полный код страницы: 

<?php 
require_once '../inc/function.php';
adac();
require_once '../inc/db.php';
if(!empty($_POST)){
$requ = $pdo->prepare('INSERT INTO `vehicules`(`marques`, `modele`, `annee`, `proprio`, `imma`) VALUES (?, ?, ?, ?, ?)');
$rl= $requ->execute([$_POST['mq'], $_POST['ml'], $_POST['an'], $_POST['pro'], $_POST['im']]);
if($rl){
    $_SESSION['flash']['success'] = "Informations enregistrées!";
}else{
    $_SESSION['flash']['danger'] = "Echec!"; 
}
}
?>
<!DOCTYPE HTML>

<html>

<head>
<script src="../bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
<script src="../js/jquery.min.js"></script>
<script src="../js/popper.min.js"></script>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>LeLoux</title>
  <link rel="stylesheet" href="../bootstrap-4.3.1-dist\css\bootstrap.min.css">
<style>
body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
}

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}
.o{
    margin: 10px;   }
.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: light;
  text-align: center;
}
.lk{
    width: 135px;
    height: 40px;
    border: 1.6px solid grey;
    border-radius: 5px;
    margin: 10px;
    display: inline-block;
}
.po{
    width: 34px;
    height: 34px;
    background: transparent;
    float: left;
    margin: 1px;
    cursor: pointer;
}
.poa{
    text-align: center;
    margin: 5px;
    text-decoration: none;
}
.nav-item{
    width: 17%;
    text-align: center;
    margin:5px;

}
.bob{
          width: 720px;
}
.mo{
    margin: 5px;
    border: 1px solid transparent;
  width: 1100px;
  height: auto;
}
.fo{
    display: inline-block;
    }
a {
    text-decoration: none;
    color: black;
}
a:hover{
    color: grey;
}
.co{
max-height:860px;
height:460px;/*pour IE qui comprend rien, et qui ne reconnait pas min-height, mais qui comprend mal height*/
max-width:1100px;
width:980px;/*pour IE qui comprend rien*/
overflow:auto;/*pour activer les scrollbarres*/
}


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 90%;

}

/* The Close Button */
.close {
  color: #fefefe;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.modal-header{
  background-color: #5e5e90;
  color: #fff;
  margin-top: -20%;
  width: 110%;
  height: 15%;
  padding: 16px;
  margin-left: -19px;
}
.btnq{
  background-color: #5e5e90;
  color: #fff;
}
.btnp{
  background-color:#fff;
  color:#5e5e90;
  border: 2px solid #5e5e90;
  font-weight: bolder;
}
.nu{
    text-transform: uppercase;
}
</style>
</head>
<body class="bg-light">
<!--################## add modal  ###############################-->
<!-- Modal -->
<div class="modal fade" id="eModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Ajouter un vehicule</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      <form action="" method="POST">
                <table cellspacing="3"cellpadding ="6">
                  <tr>
                    <td><b>Marque</b><br>
                    <input type="text" class="form-control nu" value="" name="mq" id="mq">
                </td>

                    <td><b>Modèle</b><br>
                    <input type="text" class="form-control" name="ml" id="ml">
                      </td>
                  </tr>

                  <tr>
                      <td><b>Année</b><br>
                      <input type="text" class="form-control" name="an" id="an">
                      </td>

                      <td><b>Transmission</b><br>
                      <input type="text" class="form-control" id="">
                        </td>
                    </tr>

                    <tr>
                        <td>
                          <b>N de chassis</b><br>
                          <input type="text" class="form-control" id="">
                        </td>
                        <td>
                            <b>Immatriculation</b><br>
                            <input type="text" class="form-control" name="im" id="im">
                          </td>
                    </tr>
                    <tr>
                        <td><b>Carburant</b><br>
                        <input type="text" class="form-control" id="">
                        </td>

                        <td><b>Couleur</b><br>
                        <input type="text" class="form-control" id="">
                          </td>
                      </tr>

                      <tr>
                          <td>
                            <b>Propriétaire</b><br>
                            <input type="text" class="form-control" name="pro" id="pro" >
                          </td>
                          <td>
                              <b>Contact</b><br>
                              <input type="text" class="form-control" id="">
                            </td>
                      </tr>
                </table>

            </div>
            <div class="modal-footer">
                <button type="reset" class="btn btnp" data-dismiss="modal">Annuler</button>
                <button type="submit" class="btn btnq">Enregistrer</button>

            </div>
            </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<!--################## edit modal  ###############################-->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modifier un vehicule</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      <form action="" method="POST">
                <table cellspacing="3"cellpadding ="6">
                  <tr>
                    <td><b>Marque</b><br>
                    <input type="text" class="form-control nu" value="" name="mq" id="mq">
                </td>

                    <td><b>Modèle</b><br>
                    <input type="text" class="form-control" name="ml" id="ml">
                      </td>
                  </tr>

                  <tr>
                      <td><b>Année</b><br>
                      <input type="text" class="form-control" name="an" id="an">
                      </td>

                      <td><b>Transmission</b><br>
                      <input type="text" class="form-control" id="">
                        </td>
                    </tr>

                    <tr>
                        <td>
                          <b>N de chassis</b><br>
                          <input type="text" class="form-control" id="">
                        </td>
                        <td>
                            <b>Immatriculation</b><br>
                            <input type="text" class="form-control" name="im" id="im">
                          </td>
                    </tr>
                    <tr>
                        <td><b>Carburant</b><br>
                        <input type="text" class="form-control" id="">
                        </td>

                        <td><b>Couleur</b><br>
                        <input type="text" class="form-control" id="">
                          </td>
                      </tr>

                      <tr>
                          <td>
                            <b>Propriétaire</b><br>
                            <input type="text" class="form-control" name="pro" id="pro" >
                          </td>
                          <td>
                              <b>Contact</b><br>
                              <input type="text" class="form-control" id="">
                            </td>
                      </tr>
                </table>

            </div>
            <div class="modal-footer">
                <button type="reset" class="btn btnp" data-dismiss="modal">Annuler</button>
                <button type="submit" class="btn btnq">Enregistrer</button>

            </div>
            </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>









 <div class="o"><h3 class="font-weight-bolder">LeLoux</h3>  </div>
  <div class="container bob">
      <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item shadow-sm">
      <a class="nav-link active" data-toggle="tab" href="advehi.php">Vehicules</a>
    </li>
    <li class="nav-item shadow-sm">
      <a class="nav-link" data-toggle="tab" href="adrepa.php">Reparateurs</a>
    </li>
    <li class="nav-item shadow-sm">
      <a class="nav-link" data-toggle="tab" href="adinter.php">Interventions</a>
    </li>
     <li class="nav-item shadow-sm">
      <a class="nav-link" data-toggle="tab" href="adfor.php">Forfaits</a>
    </li>
     <li class="nav-item shadow-sm">
      <a class="nav-link" data-toggle="tab" href="adfac.php">Facturations</a>
    </li>
  </ul>
  </div>







 <center><div class="tab-content mo">
 <div  class="container shadow tab-pane fade show active "><br>
  <div class="co"> 

      <table class="table">
          <thead>
            <tr>
              <th scope="col">Marques</th>
              <th scope="col">Modèle</th>
              <th scope="col">Année</th>
              <th scope="col"><div class="dropdown">
          <button class="btn  dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <b> Propriétaire</b>
          </button>
          </th>
              <th scope="col">Immatriculation</th>
              <th scope="col"><div class="dropdown">
          <button class="btn  dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <img src="../im/settings.png" class="po">
          </button>
        </th>
            </tr>
          </thead>
          <tbody>












          <?php 

$req = $pdo->prepare('SELECT DISTINCT * FROM vehicules');
 $req->execute();
$user = $req->fetchAll();
foreach ($user as $row) { ?>
<?= "<tr><th scope='row'>".$row['marques']."</th><td>".$row['modele']."</td><td>".$row['annee']."</td><td>".$row['proprio']."</td><td>".$row['imma']."</td><td><img src='../im/pencil.png' class='po' id='nie' data-toggle='modal' data-target='#exampleModal'></td></tr>"; ?>         
<?php } ?>
</tbody>
</table>
</div>
</div></center>







   <div class="footer">
      <!-- Button trigger modal -->
<button type="button" class="lk float-left" data-toggle="modal" data-target="#eModal">
<img src="../im/add.png" class="po"> <p class="poa">Ajouter</p>
</button>
  <a href=#><div class="lk float-left"><img src="../im/search.png"  class="po"> <p class="poa">Rechercher</p></div></a>
  <a href="#"><div class="lk float-left"><img src="../im/opera.png" class="po"> <p class="poa">Details</p></div></a>
  <a href="index.php"><div class="lk float-right"><img src="../im/close.png" class="po"> <p class="poa">Fermer</p></div></a>
</div>
</body>
</html>

pure html css и js modeal:

html: 

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>

css: 

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

js: 

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...