个人中心
gpt4 book ai didi

Javascript (JQuery) 和 Bootstrap 模态

转载 作者：行者123 更新时间：2023-11-28 03:02:49 26 4
gpt4 key购买 nike

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

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

  1. 必须单击电影标题链接两次才能显示模式，我不确定是什么原因造成的。查看开发工具，我可以看到在第一次单击时创建了一个模态，但由于某种原因未显示。第二次单击时，将创建并显示另一个。

  2. 显示模式后，我无法使用“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()\">&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>

我意识到这看起来很乱，但现在只想让它正常运行。如果有人对其中任何一个问题有任何见解，我们将不胜感激。

谢谢。

最佳答案

$("#movieInfo").modal("show"); 被触发之前 bloc 实际上附加到您的网页。这是由于网络延迟和 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 模态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33966013/

26 4 0
文章推荐： php - 根据用户的选择在 while 循环中获取变量？
文章推荐： html - Angular 中的 ngbTooltip 不在元素的中心
文章推荐： javascript - jQuery 这个父 prev 选择器不工作
文章推荐： javascript - 如何在NODEJS中显示来自多个文件的JSON数据
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com