Javascript（JQuery）和Bootstrap模式

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

$("#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()">&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>');

        // 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 個解決方案

解決方案1
0 已采納 2015-11-28 11:52:44

Javascript（JQuery）和Bootstrap模式

問題描述

1 個解決方案

解決方案1 0 已采納 2015-11-28 11:52:44

解決方案1
0 已采納 2015-11-28 11:52:44