Question

我正在尝试使用Jquery Mobile 1.4.5的Popup小部件，但是当我尝试从子页面加载弹出窗口中的外部页面时，我遇到了一些问题。这是我的代码：

INDEX.HTM：

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>

    <body>
        <div data-role="page">
            <ul data-role="listview">
                <li><a href="list.php">IMDB</a></li>
                <li><a href="#">Test A</a></li>
                <li><a href="#">Test B</a></li>
            </ul>
        </div><!-- /page -->
    </body>
</html>

list.php的：

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>

    <body>
        <div data-role="page">
            <ul data-role="listview">
                <li><a href="#" onClick="loadPopup('imdb.php?imdbnumber=tt0814022');" data-rel="popup" data-position-to="window">Bangkok Dangerous</a>
                <li><a href="#" onClick="loadPopup('imdb.php?imdbnumber=tt1502404');" data-rel="popup" data-position-to="window">Drive Angry</a>
                <li><a href="#" onClick="loadPopup('imdb.php?imdbnumber=tt0448011');" data-rel="popup" data-position-to="window">Knowing</a>
            </ul>
        </div>
    </body>

    <script language="javascript"> 
        function loadPopup(url) {
            $.ajax({
                type: "GET",
                url: url
            }).done(function(data) {
                $.mobile.activePage.append($(data)).trigger("create");
                $("#popup1").popup().popup("open");
            });
        }
    </script>
</html>

imdb.php：

<html>
    <body>
        <div data-role="popup" id="popup1"  style="min-height:300px;width:80%;left:10%;right:10%;" class="ui-content">
            <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Fermer</a>

            <?php
            $imdbnumber = $_GET["imdbnumber"];

            $movie_poster = "http://img.omdbapi.com/?apikey=xxxxxxxx&i=" . $imdbnumber . "&h=300";
            $movie_details = json_decode(file_get_contents("http://www.omdbapi.com/?i=" . $imdbnumber . "&plot=full"));

            echo "<div style='float:left;padding-right:20px;'><img src='" . $movie_poster . "' height=300></img></div>";

            echo "<div><h3><b>" . $movie_details->Title . " (" . $movie_details->Year . ")</b></h3>" . $movie_details->Plot . "</div>";
            ?>      
        </div>

        <script>
            $("[data-role=popup]").enhanceWithin().popup({
                afterclose: function () {
                    $(this).remove();
                }
            }).popup("open");
        </script>
    </body>
</html>

当我加载index.htm然后单击IMDB链接然后尝试加载列出的电影之一的IMDB信息时，它不起作用。如果我直接加载list.php，那么我的Popup工作正常。

我做错了什么？

谢谢！

P.S。：我尝试使用Colorbox但是得到了同样的结果......： - /

Jquery Mobile 1.4.5 Popup无法正常工作？

0 个答案: