【发布时间】：2015-11-27 23:32:04
【问题描述】：
我目前正在开展一个项目，该项目根据单击的链接以模式显示有关电影的一些信息（从 omdbapi.com 提取）。以前，这一切都是在后端使用 PHP 完成的，并且可以正常工作，但是由于一个页面上可以有 5-100 个电影链接，因此创建所有模式会导致页面需要一段时间才能加载。
现在我想用 JS 将模态创建/弹出窗口移到前面，以便仅在单击特定电影链接时创建它。移动它以使用 Javascript 我遇到了两个我无法解决的问题。
必须单击电影标题链接两次才能显示模式，但我不确定是什么原因造成的。查看开发工具，我可以看到在第一次单击时创建了一个模式，但由于某种原因没有显示。在第二次单击时，将创建并显示另一个。
显示模式后，我无法使用“X”按钮将其关闭。我在 PHP
"<button type=\"button\" class=\"close exit-button\" data-dismiss=\"modal\">&times;</button>"中使用的代码 不再工作。 Bootstrap 确实能够使用$("#movieInfo").modal("hide")显示/隐藏模式，但是如果我创建一个函数来在单击按钮时运行它，它仍然不会隐藏。
这是我正在使用的 JS 代码：
window.addEventListener("load", function() {
var movielink = document.getElementById("movie");
movielink.addEventListener("click", function(){generateModal(this.innerHTML);}, false);
}, false);
function generateModal(movieT) {
var movieTitle = encodeURIComponent(movieT).replace(/%20/g, '+');
var url = "https://www.omdbapi.com/?t="+movieTitle+"&y=&plot=short";
$.getJSON(url, function(json) {
$('#modalContainer').html("<div id = \"movieInfo\" class = \"modal fade\" role = \"dialog\">"
+ "<div class \"modal-dialog modal-sm\">"
+ "<div class = \"modal-content\">"
+ "<div class = \"modal-body\">"
+ "<div class = \"poster\">"
+ "<img src = "+json.Poster+" width = 200 height = 300>"
+ "</div>"
+ "<div class = \"movie-specs\">"
+ "<button id = \"closebtn\" type=\"button\" class=\"close exit-button\"s onclick = \"closeModal()\">×</button>"
+ "<h3 class = \"movie-title\">"+json.Title+" ("+json.Year+")</h3>"
+ "<p class = \"topmargin-gone\">"+json.Rated+" | "+json.Runtime+" | "+json.Genre+"</p>"
+ "<p class = \"topmargin-gone\">"+json.Released+"</p><hr>"
+ "<div class = \"ratingInfo\">"
+ "<h4 class = \"topmargin-gone\"><strong>Ratings</strong></h4><p class = \"topmargin-gone\">Rated: "+json.imdbRating+"/10 "
+ "from "+json.imdbVotes+" users | Metascore: "+json.Metascore+"</p>"
+ "</div><hr>"
+ "<div class = \"plot-actors\">"
+ "<p>"+json.Plot+"</p><p><strong>Director: </strong>"+json.Director+"</p>"
+ "<p><strong>Writers: </strong>"+json.Writer+"</p>"
+ "<p><strong>Actors: </strong>"+json.Actors+"</p>"
+ "</div>"
+ "</div>"
+ "</div>"
+ "</div>"
+ "</div>"
+ "</div>");
});
$("#movieInfo").modal("show");
}
这是在 PHP 中循环内创建链接的方式：
$allDisplay .= "<li><em><a id ='movie' href = '#'>"
. "$title[$z]</a></em> - $nominees[$z]</li>";
最后，这就是 HTML 在链接和模式所在位置的外观：
<html>
<head>
<meta charset = "utf-8">
<title>Award Search</title>
<!-- jQuery Library -->
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--Bootstrap CSS -->
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Styles CSS sheet -->
<link rel = "stylesheet" href = "/src/styles/styles_awardQuery.css">
<!--Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src = "/src/php/modalCreation.js"></script>
</head>
<body>
<div class = "site-wrapper">
<div class = "site-wrapper-inner">
<div class = "cover-container">
<div class = "masthead clearfix">
<div class = "inner">
<h3 class = "masthead-brand">Award Search</h3>
<ul class = "nav masthead-nav">
<li><a href = "/src/pages/welcomePage.php">Home</a></li>
<li><a href = "/src/pages/aboutLoggedIn.html">About</a></li>
<li><a href = "/src/pages/logoutPage.php">Logout</a></li>
</ul>
</div>
</div>
<div class = "inner cover">
<h1 class = "cover-heading">Academy Award Show Number <?php echo $academyNumber; ?>
<?php echo "($year[1])<br><span class = \"small\">Hosted by $acHost</span>"; ?></h1>
<?php echo $allDisplay; ?>
<div id ="modalContainer"></div>
</div>
</div>
</div>
</div>
</body>
</html>
我意识到这看起来很乱，但现在只想让它发挥作用。如果有人对其中任何一个问题有任何见解，将不胜感激。
谢谢。
【问题讨论】：
标签： javascript jquery html twitter-bootstrap bootstrap-modal