显示引导动态模式

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

在achor <a> 中嵌套<button> 不是有效的html 语法，因为它无法判断点击了哪个。此外，锚点的href 与“#”不同，因此它只是将您重定向到probleme.php?id=1&category=g。您可以按如下方式修改您的代码（未测试）：

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

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

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

1. 修改您的 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
?>

4. 使用 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");
        });
    }); 
});