我正在尝试设置一个自举模式，因此每次用户点击一个圆圈（按钮）时，会弹出一个模式，显示与该圆圈相关的内容。
但是，当用户点击一个圆圈时我看不到任何东西 - 我看不到模态开口。我无法弄清楚我哪里出错......
以下是我的代码。
.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;
}
<?php
require_once 'Net/SSH2.php';
require_once 'phpseclib1.0.10/Crypt/RSA.php';
$config = require 'config.json';
$log = 'logfile.txt';
if (is_array($config)) {
foreach ($config as $key => $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'. $key. '" ?></div>
<!-- modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labeledby= <? "exampleModalLabel'. $key. '" ?> aria="hidden">
<div class="modal-dialog" role="document"
<!-- modal content -->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLabel">Location: <? $cred['name']; ?></h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</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' . $key . '"</div>';
//echo '<p>Issues: '.$array[2].'</p>';
};
}
};
?>
更新 - 以下是我呈现的HTML页面：
<!DOCTYPE html>
<html lang="en"><head>
<title>Raspberry PI Dashboard</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body style="height:1500px">
<div class="header">
<h1>Dashboard</h1>
</div>
<style>
.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;
}
</style>
Guildford Test <!-- trigger modal with button here -->
<div id="circleGreen" class="btn btn-primary" data-toggle="modal" data-target="#myModal-----BEGIN RSA PRIVATE KEY-----
MIIJKQIBAAKCAgEAzn5X9JCICFBKeKIiH2X0V8aYu5Jhg+…
-----END RSA PRIVATE KEY-----" <="" div="">
<!-- modal -->
<div class="modal fade" id="myModal-----BEGIN RSA PRIVATE KEY-----
MIIJKQIBAAKCAgEAzn5X9JCICFBK…
-----END RSA PRIVATE KEY-----" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel-----BEGIN RSA PRIVATE KEY-----
MIIJKQIBAAKCAgEAzn5X9JCICFBKeK…
-----END RSA PRIVATE KEY-----" 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-----BEGIN RSA PRIVATE KEY-----
MIIJKQIBAAKCAgEAzn5X9JCICFBKe….
-----END RSA PRIVATE KEY-----">Location: Guildford Test </h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>No issues currently reported.</p>
<p>Currently Playing: nm_003.h264</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
Burton on Trent <!-- trigger modal with button here -->
<div id="circleGreen" class="btn btn-primary" data-toggle="modal" data-target="#myModal-----BEGIN RSA PRIVATE KEY-----
MIIJKQIBAAKCAgEAtHjHL46ZchPlz19…
-----END RSA PRIVATE KEY-----" <="" div="">
<!-- modal -->
<div class="modal fade" id="myModal-----BEGIN RSA PRIVATE KEY-----
MIIJKQIBAAKCAgEAtHjHL46ZchPlz…
-----END RSA PRIVATE KEY-----" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel-----BEGIN RSA PRIVATE KEY-----
MIIJKQIBAAKCAgEAtHjHL46Zch…
-----END RSA PRIVATE KEY-----" 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-----BEGIN RSA PRIVATE KEY-----
MIIJKQIBAAKCAgEAtHjHL46ZchPlz19u…
-----END RSA PRIVATE KEY-----">Location: Burton on Trent </h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>No issues currently reported.</p>
<p>Currently Playing: eurochange.h264</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
Woking <!-- trigger modal with button here -->
<div id="circleGreen" class="btn btn-primary" data-toggle="modal" data-target="#myModal-----BEGIN RSA PRIVATE KEY-----
MIIJKAIBAAKCAgEAzwZB3pYlBGSvZ….
-----END RSA PRIVATE KEY-----" <="" div="">
<!-- modal -->
<div class="modal fade" id="myModal-----BEGIN RSA PRIVATE KEY-----
MIIJKAIBAAKCAgEAzwZB3pYlB…
-----END RSA PRIVATE KEY-----" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel-----BEGIN RSA PRIVATE KEY-----
MIIJKAIBAAKCAgEAzwZB3pYlB…
-----END RSA PRIVATE KEY-----" 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-----BEGIN RSA PRIVATE KEY-----
MIIJKAIBAAKCAgEAzwZB3pYlBGS….
-----END RSA PRIVATE KEY-----">Location: Woking </h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>No issues currently reported.</p>
<p>Currently Playing: eurochange.h264</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
Staines <!-- trigger modal with button here -->
<div id="circleGreen" class="btn btn-primary" data-toggle="modal" data-target="#myModal-----BEGIN RSA PRIVATE KEY-----
MIIJKgIBAAKCAgEA58vxOCVcU…
-----END RSA PRIVATE KEY-----" <="" div="">
<!-- modal -->
<div class="modal fade" id="myModal-----BEGIN RSA PRIVATE KEY-----
MIIJKgIBAAKCAgEA58vxOCVcUjbFJNAd….
-----END RSA PRIVATE KEY-----" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel-----BEGIN RSA PRIVATE KEY-----
MIIJKgIBAAKCAgEA58vxOCVcUjbF…
-----END RSA PRIVATE KEY-----" 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-----BEGIN RSA PRIVATE KEY-----
MIIJKgIBAAKCAgEA58vxOCVcUjbFJ…
-----END RSA PRIVATE KEY-----">Location: Staines </h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>No issues currently reported.</p>
<p>Currently Playing: eurochange.h264</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
Swindon <!-- trigger modal with button here -->
<div id="circleGreen" class="btn btn-primary" data-toggle="modal" data-target="#myModal-----BEGIN RSA PRIVATE KEY-----
MIIJKgIBAAKCAgEAuUlPw2Ho…
-----END RSA PRIVATE KEY-----" <="" div="">
<!-- modal -->
<div class="modal fade" id="myModal-----BEGIN RSA PRIVATE KEY-----
MIIJKgIBAAKCAgEAuUlPw2HocsgC..
-----END RSA PRIVATE KEY-----" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel-----BEGIN RSA PRIVATE KEY-----
MIIJKgIBAAKCAgEAuUlPw2Hoc…
-----END RSA PRIVATE KEY-----" 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-----BEGIN RSA PRIVATE KEY-----
MIIJKgIBAAKCAgEAuUlPw2Hocsg…
-----END RSA PRIVATE KEY-----">Location: Swindon </h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>No issues currently reported.</p>
<p>Currently Playing: </p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
</body></html>
更新2
<html lang="en"><head>
<title>Raspberry PI Dashboard</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body style="height:1500px">
<div class="header">
<h1>Dashboard</h1>
</div>
<style>
.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;
}
</style>
Guildford Test <!-- trigger modal with button here -->
<div id="circleGreen" class="btn btn-primary" data-toggle="modal" data-target="#myModal-----BEGIN RSA PRIVATE KEY-----
MIIJKQIBAAKCAgEAzn5X9JCI...
-----END RSA PRIVATE KEY-----" <="" div="">
<!-- modal -->
<div class="modal fade" id="myModal-----BEGIN RSA PRIVATE KEY-----
MIIJKQIBAAKCAgEAzn5X9JCICFBK...
-----END RSA PRIVATE KEY-----" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel-----BEGIN RSA PRIVATE KEY-----
MIIJKQIBAAKCAgEAzn5X9JCICFBKeK…
-----END RSA PRIVATE KEY-----" 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-----BEGIN RSA PRIVATE KEY-----
MIIJKQIBAAKCAgEAzn5X9JCICFBKe…
-----END RSA PRIVATE KEY-----">Location: Guildford Test </h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>No issues currently reported.</p>
<p>Currently Playing: nm_003.h264</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
Burton on Trent <!-- trigger modal with button here -->
<div id="circleGreen" class="btn btn-primary" data-toggle="modal" data-target="#myModal-----BEGIN RSA PRIVATE KEY-----
MIIJKQIBAAKCAgEAtHjHL46…
-----END RSA PRIVATE KEY-----" <="" div="">
<!-- modal -->
<div class="modal fade" id="myModal-----BEGIN RSA PRIVATE KEY-----
MIIJKQIBAAKCAgEAtHjHL46ZchPlz1…
-----END RSA PRIVATE KEY-----" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel-----BEGIN RSA PRIVATE KEY-----
MIIJKQIBAAKCAgEAtHjHL46ZchPlz19u…
-----END RSA PRIVATE KEY-----" 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-----BEGIN RSA PRIVATE KEY-----
MIIJKQIBAAKCAgEAtHjHL46ZchPlz…
-----END RSA PRIVATE KEY-----">Location: Burton on Trent </h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>No issues currently reported.</p>
<p>Currently Playing: eurochange.h264</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
Woking <!-- trigger modal with button here -->
<div id="circleGreen" class="btn btn-primary" data-toggle="modal" data-target="#myModal-----BEGIN RSA PRIVATE KEY-----
MIIJKAIBAAKCAgEAzwZB3pY…
-----END RSA PRIVATE KEY-----" <="" div="">
<!-- modal -->
<div class="modal fade" id="myModal-----BEGIN RSA PRIVATE KEY-----
MIIJKAIBAAKCAgEAzwZB3pYlBGSv…
-----END RSA PRIVATE KEY-----" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel-----BEGIN RSA PRIVATE KEY-----
MIIJKAIBAAKCAgEAzwZB3pYlBG…
-----END RSA PRIVATE KEY-----" 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-----BEGIN RSA PRIVATE KEY-----
MIIJKAIBAAKCAgEAzwZB3pYl…
-----END RSA PRIVATE KEY-----">Location: Woking </h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>No issues currently reported.</p>
<p>Currently Playing: eurochange.h264</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
Staines <!-- trigger modal with button here -->
<div id="circleGreen" class="btn btn-primary" data-toggle="modal" data-target="#myModal-----BEGIN RSA PRIVATE KEY-----
MIIJKgIBAAKCAgEA58vxOC…
-----END RSA PRIVATE KEY-----" <="" div="">
<!-- modal -->
<div class="modal fade" id="myModal-----BEGIN RSA PRIVATE KEY-----
MIIJKgIBAAKCAgEA58vxOCVcUj…
-----END RSA PRIVATE KEY-----" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel-----BEGIN RSA PRIVATE KEY-----
MIIJKgIBAAKCAgEA58vxOCVcU…
-----END RSA PRIVATE KEY-----" 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-----BEGIN RSA PRIVATE KEY-----
MIIJKgIBAAKCAgEA58vxOCVcUjbFJ…
-----END RSA PRIVATE KEY-----">Location: Staines </h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>No issues currently reported.</p>
<p>Currently Playing: eurochange.h264</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
Swindon <!-- trigger modal with button here -->
<div id="circleGreen" class="btn btn-primary" data-toggle="modal" data-target="#myModal-----BEGIN RSA PRIVATE KEY-----
MIIJKgIBAAKCAgEAuUlPw2HocsgCQ…
-----END RSA PRIVATE KEY-----" <="" div="">
<!-- modal -->
<div class="modal fade" id="myModal-----BEGIN RSA PRIVATE KEY-----
MIIJKgIBAAKCAgEAuUlPw2Hoc…
-----END RSA PRIVATE KEY-----" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel-----BEGIN RSA PRIVATE KEY-----
MIIJKgIBAAKCAgEAuUlPw2Hocs…
-----END RSA PRIVATE KEY-----" 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-----BEGIN RSA PRIVATE KEY-----
MIIJKgIBAAKCAgEAuUlPw2Hocs…
-----END RSA PRIVATE KEY-----">Location: Swindon </h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>No issues currently reported.</p>
<p>Currently Playing: </p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
</body></html>
我对代码所做的更改
if(is_array($config)){
$num = 0;
foreach($config as $num => $cred){
$ssh = new Net_SSH2($cred['ip'], $cred['port']);
$key = new Crypt_RSA();
$key->loadKey($cred['key']);
echo ($cred['name']); //get 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;
$num++; }
答案 0 :(得分：2)
您必须在触发按钮中添加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的网站上阅读额外信息：https://getbootstrap.com/docs/4.0/components/modal/
答案 1 :(得分：1)
完全编辑回答
这是一个可行的快速解决方案
<?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">×</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++;
}
};
?>