显示引导动态模式

Posted 2023-05-09

【中文标题】显示引导动态模式

【英文标题】：Display a bootstrap dynamic modal

【发布时间】：2017-03-18 07:51:58

【问题描述】：

我试图在按下“Vezi rezolvare”按钮时显示一个模式

我有以下按钮代码：

<div class="col-md-4 text-center patrat-block">
                <div class="thumbnail">
                    <img class="img-responsive" src="img/LogoProbleme/pg1logo-v2.jpg" >
                    <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">，所以我知道按下了什么按钮，但它似乎刷新了页面并且没有显示模式。如何让模态显示？

【问题讨论】：

您确定这与WHERE id='".$id."'AND 无关？ - 如果它是您的实际代码，则会读取类似 WHERE id=123AND 的内容，从而导致语法错误。

php 代码正常运行。我尝试回显 $cerinta 和 $rezolvar 并显示数据库中的值。问题出在模态上。我不知道在不使用 href='probleme.php?id=1&category=g' 的情况下存储按下哪个按钮的任何方法。我认为模式没有显示，因为每次按下按钮时，页面都会再次加载。

【参考方案1】：

在achor <a> 中嵌套<button> 不是有效的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");
        );
    ); 
);