使用PHP，我试图获取数据并使用bootstrap模式显示它。
我无法打开bootstrap模式。
我的PHP代码连接到服务器和数据库，并将信息发回，但由于模态不起作用，它无法显示收到的数据。
我还尝试使用JavaScript激活模式，但它仍然无效。
这是我的代码：
<html lang="en">
<div id="head">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
<title> IUC Alumni Connect </title>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-4">
<a href="http://www.aci.k12.tr" target="_blank"><img id="JLogo" src="ACILogo.png" alt=""></a>
</div>
<div class="col-md-7">
<h1 id="JTitle" class="greeting"><b> Welcome to the IUC Reachout Page </b></h1>
<p id="JExplanation" class="greeting"> Find alumni, contact them, make the right choices.</p>
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
<style>
.modal-header, h4, .close {
background-color: #5cb85c;
color: white !important;
text-align: center;
font-size: 30px;
}
.modal-footer {
background-color: #f9f9f9;
}
</style>
</div>
<body>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px;">
<h4><span class="glyphicon glyphicon-search"></span>Results</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<?php
if($_SERVER["REQUEST_METHOD"]="GET"){
if (isset($_GET['uni_name']) && is_string($_GET['uni_name'])) {
$uname = $_GET['uni_name'];
} else {
$uname = "";
}
}
$con = mysqli_connect('', '', '', '');
if ($con->connect_errno) {
echo "
<script> alert('We are experiencing problems.') </script>";
exit;
}
$sql = "SELECT * FROM students WHERE university like '%".$uname."%'";
if (!$result = $con->query($sql)) {
echo "
<script> alert('Sorry, the website is experiencing problems.') </script>";
exit;
}
if ($result->num_rows === 0) {
echo "
<script> alert('We could not find a match for ID ".$uname.", sorry about that. Please attempt again.') </script>";
exit;
} else {
echo "<ul>
";
while($row = $result->fetch_assoc()){
echo sprintf("
<li>%s %s - %s</li>", $row["firstName"], $row["lastName"], $row["university"]);
//echo sprintf("
<li>%s</li>", $row["lastName"]);
//echo sprintf("
<li>%s</li>", $row["university"]);
}
echo "
</ul>";
}
$result->free();
$con->close();
?>
</div>
<div class="modal-footer">
<button onclick="graduateYearPage.html" type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">Return to search </button>
</div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
它无法工作的主要原因是“Bootstrap的JavaScript需要jQuery版本1.9.1或更高版本，但低于版本3”。然后你可以用你自己的话说“用javascript激活它”（jQuery）。
你的HTML也存在很多问题，但即使将其留在原地，使用例如jQuery 1.12.4也会产生差异（遗漏了你的PHP）：
<html lang="en">
<div id="head">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
<title> IUC Alumni Connect </title>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-4">
<a href="http://www.aci.k12.tr" target="_blank"><img id="JLogo" src="ACILogo.png" alt=""></a>
</div>
<div class="col-md-7">
<h1 id="JTitle" class="greeting" ><b> Welcome to the IUC Reachout Page </b></h1>
<p id="JExplanation" class="greeting"> Find alumni, contact them, make the right choices.</p>
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
<style>
.modal-header, h4, .close {
background-color: #5cb85c;
color:white !important;
text-align: center;
font-size: 30px;
}
.modal-footer {
background-color: #f9f9f9;
}
</style>
</div>
<body>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px;">
<h4><span class="glyphicon glyphicon-search"></span>Results</h4>
</div>
<div class="modal-body">
<p>Put your php code here</p>
</div>
<div class="modal-footer">
<button onclick="graduateYearPage.html" type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">Return to search </button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#myModal').modal();
});
</script>
</body>
</html>