如何将变量发送到引导模式答案

【问题标题】：How to send vaiable to a Bootstrap modal如何将变量发送到引导模式
【发布时间】：2016-05-30 10:52:03
【问题描述】：

我有一个 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>

我要查找的内容类似于您对 url 执行的操作：<button data-target="myModal&id=1">，然后在模态框内使用 $varId = $_GET['id'] 获取它。

有办法吗？

【问题讨论】：

您在同一页面中有button 和modal？如果不是在哪个实例上打开此modal？
@GuruprasadRao，对不起，我忘了说按钮在一个文件中，而模式代码在另一个文件中，因此出现了问题。我用这个信息更新了 OP。
Like see.. onclick of button 你是从index.php重定向到modal.php吗？
@GuruprasadRao，对不起，我不明白你的意思。
嗨@PoorCadaver：你没有回复回答。好不好用？

标签： php html twitter-bootstrap

【解决方案1】：

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（从Open Modal按钮获取data-id，并将其传递给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>

更多信息，请点击这里

【讨论】：

【解决方案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'
});

【讨论】：

所以我用 data-id 发送变量？我是否必须将模态 html 放在 javascript 代码中（您已打印 alert() 的地方）？
不，您可以将模式保留在它已经存在的位置。让我更新答案以消除您的疑虑。

【解决方案3】：

如果您要传递上一页的内容，请在 url 的查询字符串中设置变量。然后，您可以使用 $_GET 从 url 查询字符串中获取变量

例如

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

【讨论】：