php - 显示 Bootstrap 动态模态

Question

我试图在按下“Vezi rezolvare”按钮时显示模态

我有以下按钮代码:

<div class="col-md-4 text-center patrat-block">
                <div class="thumbnail">
                    <img class="img-responsive" src="img/LogoProbleme/pg1logo-v2.jpg" alt="">
                    <div class="caption">
                        <h3>Problema 1<br>
                        <small>Gradina</small>
                    </h3>
                        <p>Află dimensiunile grădinii</p>
                        <ul class="list-inline">
                            <li>
                                <a href="probleme.php?id=1&category=g"><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Problema"><span class="glyphicon glyphicon-pencil"></span> Vezi Rezolvare </button></a>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>

模态内容 + php :

<?php 
        if(isset($_GET['id'])&&isset($_GET['category']))
        {
            $id=$_GET['id'];
            $category=$_GET['category'];
            $sql = "SELECT cerinta, rezolvare FROM probleme WHERE id='".$id."'AND category='".$category."'";     
            $result = $conn->query($sql);
            if ($result->num_rows > 0) {

            while($row = $result->fetch_assoc()) 
            {
                $cerinta=$row["cerinta"];
                $rezolvare=$row["rezolvare"];
            }
                $_SESSION["cerinta"]=$cerinta;
                $_SESSION["rezolvare"]=$rezolvare;
        }
        }
        ?>
        <div id="Problema" class="modal fade" role="dialog">
            <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Problema</h4>
                    </div>
                    <div class="modal-body">
                        <h4>Cerinta</h4>
                        <div class="well">
                            <?php echo $cerinta;?>
                        </div>

                        <h4>Rezolvare</h4>
                        <div class="well">
                            <?php echo $rezolvare;?>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Inchide fereastra</button>
                    </div>
                </div>

            </div>
        </div>

这是试图完成的是在我的数据库中显示一个包含一些信息的模式。我检查过，值已成功存储在 $cerinta 和 $rezolvare 中。

好像按下按钮时，有一个快速淡入淡出，我被重定向到页面顶部，没有显示模态。我放了一个 <a href="probleme.php?id=1&category=g">所以我知道按下了什么按钮，但它似乎刷新了页面并且未显示模态。如何让模态显示？

Answer 1

嵌套 <button>在 achor <a> 里面不是有效的 html 语法，因为它无法判断单击了哪一个。 anchor 也有一个 href与“#”不同，所以它只是将您重定向到 probleme.php?id=1&category=g .您可以按如下方式修改代码(未测试):

1. Remove the button from inside the anchor and change the anchor to:

<a href="probleme.php?id=1&category=g" class="btn btn-primary"
   data-toggle="modal" data-target="#Problema">
    <span class="glyphicon glyphicon-pencil"></span> Vezi Rezolvare 
</a>

2. Have the template of the modal somewhere in your html:

<div id="Problema" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Problema</h4>
            </div>
            <div class="modal-body">
                Some fine body
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    Inchide fereastra
                </button>
            </div>
        </div>
    </div>
</div>

3. Modify your php to return only the body of the modal:

<?php
    // Some good php
    echo("
        <h4>Cerinta</h4>
        <div class=\"well\">
            {$cerinta)}
        </div>
        <h4>Rezolvare</h4>
        <div class=\"well\">
            {$rezolvare}
        </div>");
// The modal body is returned by php
?>

4. Use ajax to retrieve the modal body and subsequently open the modal. Something in the lines of:

$(document).ready(function() {
    // Assign some id to the anchor say id="myAnchor"
    $('#myAnchor1').click(function(e) {
        e.preventDefault();
        // get the modal
        var modal = $($(this).data("data-target"));
        var url = $(this).attr("href");
        var request = $.get(url);
        request.done(function(response) {
             // get modal
             modal.find(".modal-body").html(response);
             modal.modal("show");
        });
    }); 
});