Question

我有一个PHP网站，我正在使用Bootstrap作为框架。当我按下一个按钮时，会打开一个模态以显示一些信息。我想知道如何从上一页向此模态发送变量。

按钮位于index.php中，模态代码位于modals.php。

这是模态代码：

的index.php

require("modals.php");

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

modals.php

<!-- Modal -->
<div id="myModal" 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">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

我正在寻找的东西就像你使用网址：<button data-target="myModal&id=1">，然后在模态中使用$varId = $_GET['id']选择它。

有办法吗？

Answer 1

如果您从前一页传递某些内容，请在该网址的查询字符串中设置该变量。然后，您可以使用$_GET

从url查询字符串中获取变量

e.g。

<?php $myVar = $_GET["my value"]; ?>
<div class="modal-body">
      <p><?php echo $myVar; ?></p>
</div>

Answer 2

或者你可以像这样使用纯粹的javascript。（没有PHP）

<强> HTML：

<button data-id="myModal1" data-target="#myModal" class="myModalClass">

<!-- Modal -->
<div id="myModal" 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">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Some input text where you want to show the passed value.</p>
                <input type="hidden" name="myValue" id="myValue" value=""/>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

并使用javascript获取值

$(document).on("click", ".myModalClass", function () {
     var myValue = $(this).data('id');
     $(".modal-body #myValue").val( myValue ); // myValue has the value 'myModal1'
});

Answer 3

index.php （提供openModal中使用的类名<script></script>按钮。给予data-id属性，将值传递给它。）

<?php require("modals.php");?>


<button type="button" class="openModal btn btn-info btn-lg" data-toggle="modal" data-id='1' data-target="#myModal">Open Modal</button>

将此代码放在同一页面的某处。

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
    </div>
  </div>
</div>

JS （从data-id按钮抓取Open Modal，然后将其传递给ajax_modal.php页面

<script>
    $('.openModal').click(function(){
        var id = $(this).attr('data-id');
        $.ajax({url:"ajax_modal.php?id="+id,cache:false,success:function(result){
            $(".modal-content").html(result);
        }});
    });
</script>

ajax_modal.php （如果您要更改此页面名称。请更改<script></script>标记。两者都相关。）

<?php
$id = $_GET['id'];
?>


<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
    <p>Your Id : <?echo $id;?></p>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

有关详细信息，请单击此处

如何将vaiable发送到Bootstrap模式

3 个答案: