Home » Php » Creating a bootstrap modal

Creating a bootstrap modal

Posted by: admin September 16, 2018 Leave a comment

Questions:

I’m trying to set up a bootstrap modal so every time the user clicks on a circle (button) a modal pops up showing content related to that circle.

However, when the user clicks on a circle I don’t see anything – I don’t see the modal opening. And I can’t figure out where I’m going wrong..

Below is my code.

.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">&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' . $key . '"</div>';
            //echo '<p>Issues: '.$array[2].'</p>';
        };
    }
};
?>

Update – below is my rendered HTML page:

<!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>
Answers: