Создание модального бутстрапа - PullRequest
Новая
       7

Создание модального бутстрапа

0 голосов
/ 21 мая 2018

Я пытаюсь настроить модал начальной загрузки, чтобы каждый раз, когда пользователь нажимал на кружок (кнопку), появлялся модал, показывающий контент, связанный с этим кружком.

Однако, когда пользователь нажимает на кружок, я ничего не вижу - я не вижу модальное отверстие.И я не могу понять, где я ошибаюсь.

Ниже мой код. 

.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>';
        };
    }
};
?>

Обновление - ниже моя отрендеренная 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++; }

Ответы [ 2 ]

0 голосов
/ 21 мая 2018

EDITED ответ полностью

Вот быстрое исправление, которое будет работать 

<?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++;
    }
};
?>
0 голосов
/ 21 мая 2018

Вы должны добавить data-toggle="modal" и data-target="#YourModalID" к кнопке триггера.Основной div вашего модала должен иметь тот же идентификатор, что и data-target на вашей кнопке триггера.

Например: 

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

Вы можете прочитать дополнительную информацию на сайте начальной загрузки: https://getbootstrap.com/docs/4.0/components/modal/

...