Bootstrap Modal无法工作点击

时间:2017-04-24 07:58:17

标签: php jquery html5 twitter-bootstrap modal-dialog

我试图按下按钮打开一个模式,点击带有标签的按钮"选择数量和尺寸*:"但由于某些原因我无法正常工作,我会很高兴,请注意我已经为footer.php文件中的modal中的updateSizes()函数添加了额外的jQuery。 我相信你的专业知识将帮助我解决这个问题,我有点卡在这里,我在getbootstrap上复制了模态。玉米,

我页面上的模式位于评论下方:     < - 选择数量和尺寸的模态 - > PS:这只是一个提高我技能的个人测试项目,所以安全性虽然是一个非常重要的方面,但却被破坏了。

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

1 个答案:

答案 0 :(得分:0)

使用bootstrap的数据切换属性代替onclick属性。

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

查看此链接以获取详细说明

Bootstrap Modal