for循环怎么让对应每个弹窗显示内容

 for($kay=0;$kay<count($newarr);$kay++){
        $val=$newarr[$kay];

.popup {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 9999;
      }

      .popup-content {
        background-color: #fff;
        max-width: 400px;
        margin: 100px auto;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      }

      .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
      }

const popup = document.getElementById("popup");
      const popupButton = document.getElementById("popupButton");

      popupButton.addEventListener("click", () => {
        popup.style.display = "block";
      });

      function closePopup() {
        popup.style.display = "none";
      }

    <button id="popupButton">Open Popup</button>
    <div id="popup" class="popup">
      <div class="popup-content">
        <span class="close" onclick="closePopup()">&times;</span>
        <h2>弹窗</h2>
        <p><?php echo $val['zhu']; ?></p>
      </div>
    </div>

展开全部

写回答
好问题 0 提建议
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

1条回答默认最新

热爱技术。 2024-09-01 02:39

关注

参考gpt：以下是一个使用 PHP 和 HTML/CSS/JavaScript 的示例，展示如何在循环中为每个弹窗显示不同的内容：

<?php
// 假设这是你的数据数组
$newarr = [
    '内容 1',
    '内容 2',
    '内容 3'
];
?>
<!DOCTYPE html>
<html>

<head>
    <style>
       .popup {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9999;
        }

       .popup-content {
            background-color: #fff;
            max-width: 400px;
            margin: 100px auto;
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }

       .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <?php for ($kay = 0; $kay < count($newarr); $kay++) {?>
        <button onclick="showPopup(<?php echo $kay;?>)">显示弹窗 <?php echo $kay + 1;?></button>
    <?php }?>

    <?php for ($kay = 0; $kay < count($newarr); $kay++) {?>
        <div id="popup<?php echo $kay;?>" class="popup">
            <div class="popup-content">
                <?php echo $newarr[$kay];?>
                <span class="close" onclick="hidePopup(<?php echo $kay;?>)">×</span>
            </div>
        </div>
    <?php }?>

    <script>
        function showPopup(kay) {
            document.getElementById('popup' + kay).style.display = 'block';
        }

        function hidePopup(kay) {
            document.getElementById('popup' + kay).style.display = 'none';
        }
    </script>
</body>

</html>

在这个示例中，PHP 循环生成了多个按钮和对应的弹窗。每个弹窗都有一个唯一的 ID，并在点击按钮时显示相应的内容。点击弹窗上的关闭按钮可以隐藏弹窗。

请注意，这只是一个简单的示例，你可以根据实际需求进行调整和扩展。同时，确保在实际应用中进行适当的错误处理和安全性考虑。

展开全部

本回答被题主选为最佳回答 , 对您是否有帮助呢?

编辑

预览

报告相同问题？

关注问题

js实现点击每个li节点，都弹出其文本值及修改
2020-10-20 12:51

本文将详细介绍如何使用JavaScript实现点击每个`<li>`节点时，弹出该节点的文本值，并根据特定规则进行文本值的修改。首先，我们需要获取页面上所有的`<li>`节点。在JavaScript中，可以使用`document....
1.5 编写自定位ShellCode弹窗
2023-07-03 00:40

微软技术分享的博客在笔者上一篇文章中简单的介绍了如何运用汇编语言编写一段弹窗代码，虽然简易`ShellCode`可以被正常执行，但却存在很多问题，由于采用了硬编址的方式来调用相应API函数的，那么就会存在一个很大的缺陷，如果操作系统...
利用DeepSeek编程写一个python小游戏
2025-03-04 09:42

sunny_day33的博客 Query：基于python3.10版本在PyCharm社区版写一段python代码，生成一个适合幼儿园小朋友玩的游戏，需要有漂亮可爱的前端页面，列出需要pip哪些包Answer：在 PyCharm 社区版中为幼儿园小朋友开发游戏，建议使用简单且...
AxureRP_repeater.rar_通讯编程文档_HTML_
2021-08-11 07:45

每个组件内部的属性都与数据源的相应字段进行绑定，以实现动态更新。 **四、案例分析** 在提供的"AxureRP_repeater.docx"文档中，可能详细讲解了如何在Axure RP中配置和使用中继器，以及如何将其转换为HTML页面，...
简单的弹窗病毒编程代码,python弹出窗口的代码
2024-06-29 14:03

2401_85422614的博客爬虫(spider，又网络爬虫)，是指向网站/网络...Python所有方向路线就是把Python常用的技术点做整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。
JavaScript参数个数可变的函数举例说明
2020-10-25 01:31

`for`循环遍历arguments对象，将每个参数值连接到变量`params`中。我们可以看到，这个函数在调用时可以传入不同数量的参数： ```javascript testParams("abc", 123); testParams(123, "456", 789); testParams(); `...
【AI 大模型】使用 AI 大模型编程 ① ( AI 编程简介 | 使用 GitHub Copilot 插件进行 AI 编程 | 使用对话方式进行 AI 编程 )
2024-07-27 13:48

韩曙亮的博客一、AI 编程简介 1、GPT 大模型可替代的工作特点 - " 输入文本 -> 输出文本 " 2、大模型的编程能力 3、GPT 大模型进行编程工作的优缺点 4、AI 编程技巧 5、提示工程应用于 AI 编程 6、AI 编程的适用场景二、...
vb定时显示报警系统设计(设计说明书+源代码).zip
2024-05-06 02:01

7. **源代码结构**：源代码通常包括多个窗体（Form）和模块（Module），每个窗体对应一个界面，模块则封装了特定的功能。 8. **测试与调试**：设计文档会记录系统的测试过程，包括单元测试、集成测试和系统测试，...
墨韵蛇途：C 语言勾勒的单人贪吃蛇绮梦
2024-04-21 01:22

羑悻的小杀马特.的博客在 C 语言的代码世界里，一场惊险刺激的单人贪吃蛇冒险即将开启！操控灵动蛇身，穿越像素迷宫，精准吞噬食物，躲避致命危机。简洁代码构筑趣味天地，等你来挑战极限！
【Python】GUI编程(Tkinter)教程
2020-05-20 13:16

木子欢儿的博客 /usr/bin/python3 import tkinter top = tkinter.Tk() # 进入消息循环 top.mainloop() 窗口主体框架每一个 tkinter 应用的主体框架都可以包含下面这部分. 定义 window 窗口和 window的一些属性, 然后书写窗口...
没有解决我的问题, 去提问

问题事件

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
系统已结题 9月8日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
已采纳回答 9月1日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
创建了问题 9月1日

for循环怎么让对应每个弹窗显示内容

1条回答 默认 最新

问题事件

1条回答默认最新