Bootstrap Modal funktioniert nicht auf klicken

Question

Ich versuche, die Schaltfläche zu öffnen, ein Modal auf Klick auf die Schaltfläche mit dem Label "Select Quantity and Sizes *:" aber aus irgendeinem Grund kann ich nicht das funktioniert, ich Ich freue mich über den Kopf, Bitte beachten Sie, dass ich zusätzliche jQuery für die Funktion updateSizes() im Modal in der Datei footer.php bereits enthalten. Ich glaube, deine Expertise wird mir helfen, das zu lösen, ich bin irgendwie hier festgefahren, ich habe das Modal auf getbootstrap kopiert. com,

Die Modal auf meiner Seite wird gerade unter dem Kommentar gefunden: < - Modal für Wählen Sie Menge und Größen -> PS: dieses Projekt nur ein persönlicher Tests ist meine Fähigkeiten zu schärfen, so dass die Sicherheit ist untergraben, obwohl ein sehr wichtiger Aspekt.

<?php 
require_once $_SERVER['DOCUMENT_ROOT'] . '/eCommerce/core/init.php'; 
include 'includes/head.php'; 
include 'includes/navigation.php'; 


if (isset($_GET['add'])) { 

    $brandQuery = $db->query("SELECT * FROM brand ORDER BY brand"); 
    /* making query and putting in alphabetical order */ 
    $parentQuery = $db->query("SELECT * FROM categories WHERE parent=0 ORDER BY Category"); 

    ?> 

    <h2 class="text-center">Add a New Product</h2> 
    <!-- Product upload form --> 
    <form action="products.php?add=1" method="POST" enctype="multipart/form-data"> 
     <div class="form-group col-sm-3"> 
      <label for="title">Title*:</label> 
      <input type="text" class="form-control" name="title" id="title" value="<?= ((isset($_POST['title'])) ? sanitize($_POST['title']) : ''); ?>"> 
     </div><!-- end div Title --> 

     <div class="form-group col-sm-3"> 
      <label for="brand">Brand*:</label> 
      <select class="form-control" id="brand" name="brand"> 
       <option value=""<?= ((isset($_POST['brand']) && $_POST['brand'] == '') ? ' selected' : ''); ?>></option> 
       <?php while ($brand = mysqli_fetch_assoc($brandQuery)): ?> 
        <option value="<?= $brand['id'] ?>"<?= ((isset($_POST['brand']) && $_POST['brand'] == $brand['id']) ? ' selected' : ''); ?>><?= $brand['brand']; ?></option> 
       <?php endwhile; ?> 
      </select> 
     </div> <!-- end div Select Brand --> 

     <div class="form-group col-sm-3"> 
      <label for="parent">Main Category*:</label> 
      <select class="form-control" id="parent" name="parent"> 
       <option value=""<?= ((isset($_POST['parent']) && $_POST['parent'] == '') ? ' selected' : ''); ?>></option> 
       <?php while ($parent = mysqli_fetch_assoc($parentQuery)): ?> 
        <option value="<?= $parent['id'] ?>"<?= ((isset($_POST['parent']) && $_POST['parent'] == $parent['id']) ? ' selected' : ''); ?>><?= $parent['category']; ?></option> 
       <?php endwhile; ?> 
      </select> 
     </div> <!-- end div Select Main Category --> 

     <div class="form-group col-sm-3"> 
      <label for="child">Child Category*:</label> 
      <select class="form-control" id="child" name="child"> 
      </select> 
     </div> <!-- end div Select child Category --> 

     <div class="form-group col-sm-3"> 
      <label for="price">Price*:</label> 
      <input type="text" id="price" name="price" class="form-control" value="<?= ((isset($_POST['price'])) ? $_POST['price'] : ''); ?>"> 
     </div> <!-- end div Price --> 

     <div class="form-group col-sm-3"> 
      <label for="list_price">List Price*:</label> 
      <input type="text" id="list_price" name="list_price" class="form-control" value="<?= ((isset($_POST['list_price'])) ? $_POST['list_price'] : ''); ?>"> 
     </div> <!-- end div List Price --> 

     <div class="form-group col-sm-3"> 
      <label for="price">Select Quantity and Sizes*:</label> 
      <button type="button" class="btn btn-success form-control" onclick="jQuery('#sizesModal').modal('toggle');return true;">Quantity $ Sizes</button> 
     </div> <!-- end div Select Quantity and Prices --> 

     <div class="form-group col-sm-3"> 
      <label for="sizes">Sizes and Quantity Preview*:</label> 
      <input type="text" id="sizes" name="sizes" class="form-control" value="<?= ((isset($_POST['sizes'])) ? $_POST['sizes'] : ''); ?>" readonly> 

     </div> <!-- end div Select Sizes and Qty Preview --> 
     <div class="form-group col-sm-6"> 
      <label for="photo">Product Photo: </label> 
      <input type="file" name="photo" id="photo" class="form-control"> 
     </div> <!-- end div Product Photo --> 

     <div class="form-group col-sm-6"> 
      <label for="description">Product Description: </label> 
      <textarea id="description" name="description" class="form-control" rows="6"><?= ((isset($_POST['description'])) ? sanitize($_POST['description']) : ''); ?></textarea> 
     </div> <!-- end div Product Description--> 
     <div class="form-group pull-right"> 
      <input type="submit" value="Add Product" class="form-control btn btn-success pull-right"> 
     </div> 
     <div class="clearfix"></div> 

    </form> 

    <!-- Modal for Select Quantity and Sizes --> 
    <div class="modal fade details-1" id="sizesModal" tabindex="-1" role="dialog" aria-labelledby="ModalSizesQuantityLabel" aria-hidden="true"> 
     <div class="modal-dialog modal-lg"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button class="close" type="button" onclick="closeModal()" aria-label="Close"> 
         <span aria-hidden="true">&times;</span> 
        </button> 
        <h4 class="modal-title text-center">Select quantity & Sizes</h4> 
       </div> <!-- end modal-header --> 
       <div class="modal-body"> 
        <div class="container-fluid"> 
         <div class="row"> 
          ... 
         </div> 
        </div> <!-- end container-fluid --> 
       </div> <!-- end modal-body --> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> 
        <button type="button" class="btn btn-primary" onclick="updateSizes();jQuery('#sizesModal').modal('toggle');return false;">Save changes</button> 
       </div> 

      </div><!-- end modal content --> 
     </div> <!-- end modal-dialog modal lg --> 
    </div> <!-- End Modal for Size & Quantity -- > 



<?php 
}else { 
    $sql = "SELECT*FROM products WHERE deleted = 0"; 
    $product_results = $db->query($sql); 



    if (isset($_GET['featured'])) { 
     $id = (int) $_GET['id']; 
     $featured = (int) $_GET['featured']; 
     $sql_feature = "UPDATE products SET feature = '$featured' WHERE id='$id' "; 
     $db->query($sql_feature); 
     header('Location:products.php'); 
    } 

    ?> 



    <h2 class="text-center">Products</h2> 
    <a href="products.php?add=1" class="btn btn-success pull-right" id="add_product_btn">Add Product</a> <div class="clearfix"></div> 
    <hr> 

    <!-- Table for products --> 
    <table class="table table-bordered table-condensed table-striped"> 
     <thead> 
     <th></th> 
     <th>Product</th> 
     <th>Price</th> 
     <th>Category</th> 
     <th>Featured</th> 
     <th>Sold</th> 
    </thead> 
    <tbody> 
     <?php 
     while ($product = mysqli_fetch_assoc($product_results)): 
      /* setting category of child element */ 
      $childID = $product['categories']; 
      $category_sql = "SELECT * FROM categories WHERE id = '$childID' "; 
      $category_result = $db->query($category_sql); 
      $category_child = mysqli_fetch_assoc($category_result); 
      $parentID = $category_child['parent']; 
      $parent_sql = "SELECT * FROM categories WHERE id ='$parentID' "; 
      $parent_results = $db->query($parent_sql); 
      $parent_fetch = mysqli_fetch_assoc($parent_results); 
      $category = $parent_fetch['category'] . '-' . $category_child['category']; 

      ?> 
      <tr> 
       <td> 
        <a href="products.php?edit=<?= $product['id']; ?>" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-pencil"></span></a> 
        <a href="products.php?delete=<?= $product['id']; ?>" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-trash"> 
         </span></a> 
       </td> 
       <td><?= $product['title']; ?></td> 
       <td><?= money($product['price']); ?></td> 
       <td><?= $category; ?></td> 

       <td><a href="products.php?featured=<?= (($product['feature'] == 0) ? '1' : '0'); ?> &id=<?= $product['id']; ?>" class="btn btn-xs btn-default"> <span class="glyphicon glyphicon-<?= (($product['feature'] == 1) ? 'minus' : 'plus'); ?>"></span></a>&nbsp <?= (($product['feature'] == 1) ? 'Featured Product' : ''); ?> 
       </td> 
       <td>0</td> 
      </tr> 
    <?php endwhile; ?> 
    </tbody> 
    </table> 

<?php } include 'includes/footer.php'; ?> 

Answer 1

Verwenden Bootstrap Daten-Toggle-Attribut stattdessen auf Onclick-Attribut.

<button type="button" class="btn btn-success form-control" 
onclick="jQuery('#sizesModal').modal('toggle');return true;"> 
    Quantity $ Sizes 
</button> 

<button type="button" class="btn btn-success form-control" 
data-toggle="modal" data-target="#sizesModal"> 
    Quantity $ Sizes 
</button> 

Schauen Sie sich diesen Link für detaillierte Erklärung

Bootstrap Modal