Javascript（JQuery）和Bootstrap模式

Question

I am currently working on a project that displays some information about movies(pulled from omdbapi.com) in a modal depending on the link that is clicked. 我目前正在研究一个项目，该项目根据所单击的链接以模式显示一些有关电影的信息（从omdbapi.com中拉出）。 Previously this was all done using PHP in the back end and was working without any issues, but as a page can have anywhere from 5-100 movie links on it, creating all of the modals was causing the page to take a while to load. 以前，所有这些操作都是在后端使用PHP完成的，并且没有任何问题，但是由于页面上可以包含5-100个电影链接，因此创建所有模态会使页面加载需要一段时间。

Now I want to move the modal creation/popup to the front with JS so that it is only created when and if that particular movie link is clicked. 现在，我想使用JS将模式创建/弹出窗口移到最前面，以便仅在单击该特定电影链接时以及在单击该特定电影链接时才创建它。 Moving it to use Javascript I have encountered two issues I am not able to solve. 将其移动以使用Javascript我遇到了两个我无法解决的问题。

The movie title link must be clicked twice in order for the modal to appear and I am not sure what is causing this. 电影标题链接必须被单击两次以使模态出现，我不确定是什么原因造成的。 Looking at the dev tools I can see that on the first click a modal is created, but for some reason not displayed. 查看开发工具，我可以看到在第一次单击时创建了一个模态，但由于某种原因未显示。 On the second click another is created and displayed. 在第二次单击上，将创建并显示另一个。
Once a modal is displayed I am unable to get my "X" button to close it. 显示模态后，我无法获得“ X”按钮来关闭它。 The code I was using in PHP "<button type=\\"button\\" class=\\"close exit-button\\" data-dismiss=\\"modal\\">×</button>" no longer works. 我在PHP中使用的代码"<button type=\\"button\\" class=\\"close exit-button\\" data-dismiss=\\"modal\\">×</button>"不再起作用。 Bootstrap does have the ability to show/hide a modal with $("#movieInfo").modal("hide") , but if I create a function to run this when the button is clicked it still does not hide. Bootstrap确实具有使用$("#movieInfo").modal("hide")显示/隐藏模态的功能，但是如果我创建了一个函数来在单击按钮时运行它，它仍然不会隐藏。

Here is the JS code that I am using: 这是我正在使用的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");

}

This is how the the links are created inside a loop in PHP: 这是在PHP的循环内创建链接的方式：

$allDisplay .= "<li><em><a id ='movie' href = '#'>"
                 . "$title[$z]</a></em> - $nominees[$z]</li>";

And finally this is how the HTML looks where the links and modal reside: 最后，这是链接和模式所在的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>

I realize this looks messy, but just want to get it functioning right now. 我意识到这看起来很混乱，但是只是想让它立即运行。 If anyone has any insight into either of the issues it would be much appreciated. 如果有人对这两个问题有任何见解，将不胜感激。

Thanks. 谢谢。

Answer 1

The $("#movieInfo").modal("show"); $("#movieInfo").modal("show"); is triggered before the bloc was actually append to your web page. 是在将区块实际添加到您的网页之前触发的。 This is due to the network latency and the Async behaviour of AJAX call that allow your script to continue without waiting to get an answer. 这是由于网络延迟和AJAX调用的异步行为所致，使您的脚本可以继续运行而无需等待得到答案。

To avoid this, you should put this line at the end of the network callback : 为了避免这种情况，您应该将这一行放在网络回调的末尾 ：

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
}

For your other bug, I think the double modal may explain the behaviour, so patch this first, and told us if you still can't close your modal ;) 对于您的其他错误，我认为双重模式可以解释该行为，因此请先对此进行修补，并告诉我们是否仍然无法关闭模式;）

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