Javascript 创建引导模式

我正在尝试设置一个引导模式，这样每当用户单击一个圆圈（按钮）时，就会弹出一个模式，显示与该圆圈相关的内容

然而，当用户点击一个圆圈时，我什么也看不到——我看不到模式的开口。我也不知道我错在哪里

下面是我的代码

.header {
background-color:LightBlue;
padding:20px;
text-align:center;
}

#circleRed {
background: Red;
height: 25px;
width: 25px;
border-radius: 50%;
display: inline-block;
}

#circleGreen {
background: Lime;
height: 25px;
width: 25px;
border-radius: 50px;
display: inline-block;
}

.modal{
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}

.modal-content{
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}

.close-button {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close-button:hover {
background-color: darkgray;
}

.close-button:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

&时代；
目前没有报告任何问题

目前正在播放：

更新-下面是我呈现的HTML页面：

树莓皮
仪表板
.标题{
背景颜色：浅蓝色；
填充：20px；
文本对齐：居中；
}
#圈{
背景：红色；
高度：25px；
宽度：25px；
边界半径：50%；
显示：内联块；
}
#圆绿色{
背景：石灰；
高度：25px；
宽度：25px；
边界半径：50px；
显示：内联块；
}
.莫代尔{
显示：无；
位置：固定；
z指数：1；
填充顶部：100px；
左：0；
排名：0；
宽度：100%；
身高：100%；
溢出：自动；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.4）；
}
.模态内容{
背景色：#fefe；
保证金：自动；
填充：20px；
边框：1px实心#888；
宽度：80%；
}
.关闭按钮{
颜色：#AAAAA；
浮动：对；
字号：28px；
字体大小：粗体；
}
.关闭按钮：悬停{
背景色：暗灰色；
}
.关闭按钮：焦点{
颜色：#000；
文字装饰：无；
光标：指针；
}
吉尔福德试验
地点：吉尔福德测试
×
目前没有报告任何问题

当前播放：nm_003.h264

特伦特伯顿酒店
地点：特伦特河畔伯顿
×
目前没有报告任何问题

目前正在播放：eurochange.h264

工作
地点：沃金
×
目前没有报告任何问题

目前正在播放：eurochange.h264

斯坦斯
地点：斯坦斯
×
目前没有报告任何问题

目前正在播放：eurochange.h264

斯温顿
地点：斯温顿
×
目前没有报告任何问题

目前正在播放：

您必须将

data toggle=“modal”

和

data target=“#YourModalID”

添加到触发器按钮。模态的主div应该与触发器按钮上的数据目标具有相同的ID

例如：

<!--My trigger button-->
<a href="#" data-toggle="modal" data-target="#loginModal">Login</a>

<!--My login's modal-->
<div class="modal fade" id="loginModal" aria-hidden="true">
   <!-- My modal's content -->
</div>

您可以在bootstrap的网站上阅读更多信息：

编辑答案

这里有一个快速的解决办法

<?php

require_once 'Net/SSH2.php';
require_once 'phpseclib1.0.10/Crypt/RSA.php';
$config = require 'config.json';
$log = 'logfile.txt';

$num = 0;
if (is_array($config)) {
    foreach ($config as $cred) {
        $ssh = new Net_SSH2($cred['ip'], $cred['port']);
        $key = new Crypt_RSA();
        $key->loadKey($cred['key']);

        echo($cred['name']); //get Raspberry PI name from config file

        if (!$ssh->login('pi', $key)) {
            file_put_contents($log, "[" . date('Y-m-d H:i:s') . "]Login Failed for {$cred['ip']}\n", FILE_APPEND | LOCK_EX);
            continue;
        }

        $output = $ssh->exec('tail -1 /var/log/playlog.csv');
        $array = explode(',', $output);

        if (end($array) >= 0) { ?>
            <!-- trigger modal with button -->
            <div id="circleGreen" class="btn btn-primary" data-toggle="modal" data-target="#myModal<?= $num; ?>"></div>

                <!-- modal -->
                <div class="modal fade" id="myModal<?= $num; ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel<?= $num; ?>" aria-hidden="true">
                    <div class="modal-dialog" role="document">

                    <!-- modal content -->
                    <div class="modal-content">
                        <div class="modal-header">

                            <h4 class="modal-title" id="exampleModalLabel<?= $num; ?>">Location: <? $cred['name']; ?></h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <p>No issues currently reported.</p>
                            <p>Currently Playing: <?= $array[1]; ?></p>
                        </div>
                        <div class="modal-footer">
                        </div>
                    </div>
                </div>
            </div>
            </div>
        <?php } else {
            echo '<div id="circleRed" class="btn btn-primary" data-toggle="modal" data-target="#myModal' . $num . '"</div>';
            //echo '<p>Issues: '.$array[2].'</p>';
        }
        $num++;
    }
};
?>

&时代；
目前没有报告任何问题

目前正在播放：

真的吗？你打算问多少次同样的问题，三是这个。顺便说一句，你的代码中还有一个未关闭的标签。（

直到我有了一个有效的解决方案/或者弄清楚我在做什么。我仍然无法打开一个模式，你关于从PHP分离到HTML的建议很有帮助，我也接受了，但这对我的主要问题没有帮助。好吧，好吧，别生气。我只是想帮你：）看看我的答案。我认为现在应该可以了。她的数据目标尚未定义。您好，感谢您的澄清和示例，但我仍然无法打开带有您代码的模式：（使用您的代码，我整天都在阅读内容/示例，看看我可能做错了什么……但我仍然没有sure@Sara请附加呈现的html。您可以使用devtools复制它，右键单击元素，然后选择“复制->复制outerHTML”。我已经更新了我的问题以显示呈现的html。我取出了一些RSA密钥位以使代码更容易让你阅读哈哈，我想你是对的。宇宙就是讨厌我。我创建了变量并更改了for循环，但这不起作用。我会用更新后的代码更新我的问题。@Sara看起来像