Question

我目前正在开发一个项目，根据点击的链接，以模式显示有关电影的一些信息（从omdbapi.com中提取）。以前这一切都是在后端使用PHP完成的，并且没有任何问题，但是由于页面上可以有5-100个电影链接，因此创建所有模式会导致页面需要一段时间才能加载。

现在我想用JS将模态创建/弹出窗口移到前面，这样只有在点击特定的电影链接时才会创建它。移动它使用Javascript我遇到了两个我无法解决的问题。

必须单击两次电影标题链接才能显示模式，我不确定导致这种情况的原因。查看开发工具，我可以看到在第一次单击时创建了一个模态，但由于某种原因没有显示。在第二次单击时，将创建并显示另一个。
一旦显示模态，我无法通过“X”按钮关闭它。我在PHP "<button type=\"button\" class=\"close exit-button\" data-dismiss=\"modal\">×</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()\">&times;</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>

我意识到这看起来很乱，但只是想让它现在正常运作。如果有人对任何一个问题有任何见解，那将非常感激。

感谢。

Answer 1

在 bloc实际附加到您的网页之前，$("#movieInfo").modal("show");被触发。这是由于网络延迟和AJAX调用的异步行为，允许您的脚本继续而无需等待获得答案。

为避免这种情况，您应将此行放在网络回调的末尾：

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>'); // after we have made the modal, we show it $("#movieInfo").modal("show"); }); // code here will be fired before the end of the AJAX call }

对于你的另一个错误，我认为双模式可以解释这个行为，所以先修补它，并告诉我们你是否仍然无法关闭你的模态;）

Javascript（JQuery）和Bootstrap模式

1 个答案: