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语法，因为它无法分辨哪一个被点击。此外，锚点的href与“＃”不同，因此它只是将您重定向到probleme.php?id=1&category=g。您可以按照以下（未测试）：

修改代码

从锚内移除按钮并将锚更改为：

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

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

修改你的php只返回模态的主体：

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

使用ajax检索模态体并随后打开模态。有点像：

$(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");
        });
    }); 
});

显示引导动态模态

1 个答案: