首页
学习
活动
专区
圈层
工具
发布

将php变量传递给bootstrap modal from button click no ajax

在PHP中,可以通过按钮点击将变量传递给Bootstrap模态框,而无需使用Ajax。下面是一个完整的示例:

  1. 首先,确保你已经引入了Bootstrap的相关文件,包括CSS和JavaScript。
  2. 创建一个包含按钮和模态框的HTML页面:
代码语言:html
复制
<!DOCTYPE html>
<html>
<head>
    <title>PHP传递变量给Bootstrap模态框</title>
    <!-- 引入Bootstrap的CSS文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
    <!-- 创建一个按钮 -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal" data-variable="Hello World">打开模态框</button>

    <!-- 创建一个模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">模态框标题</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- 在模态框中显示传递的变量 -->
                    <p id="variableValue"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入Bootstrap的JavaScript文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 当模态框显示时,将变量传递给模态框
        $('#myModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget); // 触发模态框的按钮
            var variable = button.data('variable'); // 获取按钮上的data-variable属性值
            var modal = $(this);
            modal.find('#variableValue').text(variable); // 将变量值显示在模态框中
        });
    </script>
</body>
</html>

在上述示例中,我们创建了一个按钮,通过设置data-variable属性来传递变量的值。当按钮被点击时,模态框会显示,并且通过JavaScript代码将变量的值显示在模态框中。

这是一个简单的示例,你可以根据自己的需求进行扩展和修改。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的视频

领券