Question

我尝试使用Toddish弹出库（https://github.com/Toddish/Popup）在弹出窗口中加载外部HTML文件。

我的情况如下：我想将存储在外部文件中的一些HTML加载到弹出窗口中，但是库只是拒绝这样做，即使我做的与文档演示完全相同。当我单击应该触发弹出窗口的链接时，没有任何反应。我在正确的位置有 popup.css 和 jquery.popup.js 文件，它们是最新版本。

这是 testpopup.html ：

＆＃13;

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Popup test</title>

        <link rel="stylesheet" href="popup.css" type="text/css" />
    </head>
    <body>
        <a href="#" id="htmlpopup" class="popup">Click Me!</a>

        <script src="jquery.js"></script>
        <script src="jquery.popup.js"></script>
        <script>
            $(document).ready ( function ( ) {
                $( "a.popup" ).popup ( );
            } );
        </script>
    </body>
</html>

＆＃13;

这是我尝试加载的文件， testcontent.html ：

＆＃13;

<i>This is some italic!</i>

＆＃13;

当我右键单击链接并选择在新标签页中打开此页面时，我的浏览器（Firefox 57.0.1）将我带到页面就好了。

我可以手动指定内容，而不是看到包含该内容的弹出窗口。我已经考虑过只指定一个iframe链接到testcontent.html作为我的问题的解决方法，但我总是听说iframe是邪恶的，所以我宁愿不这样做。

有人有解决方案吗？

非常感谢，约书亚

Answer 1

谢谢你的指针Rafael Castelani！这就是我所需要的。我在Bootstrap中制作了我的模态。这是我为其他人制作的一些示例代码。代码在评论中解释：

<强> testmodal.html ：

<!-- This modal example uses Bootstrap 3.3.7! -->

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />

        <title>A simple modal example</title>

        <!-- Include Bootstrap 3.3.7 CSS here in the head section -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body>
        <!-- The data-toggle="modal" is necessary and should be copied verbatim to your code!
             The data-target="#modal" is also mandatory, but you should change #modal to #<ID of
             the div with class modal that contains your desired modal>.
             The value of the href attribute is the file Bootstrap will load HTML into the modal from. -->
        <a data-toggle="modal" data-target="#modal" href="testmodalcontent.html">Show a modal!</a>

        <!-- This entire nested div structure is necessary for modals -->
        <div class="modal fade text-center" id="modal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <!-- The external HTML will be inserted here.
                         Note: you can just place the header-body-footer div structure in the
                         external file. For example: you could place the following in
                         testmodalcontent.html:
                         

                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body">
                        <p>Hello, world!</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
                    </div> --> 
                </div>
            </div>
        </div>

        <!-- Include the jQuery and Bootstrap javascript libraries. Order is important! -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </body>
</html>

<强> testmodalcontent.html

<h1>This is a special modal!</h1>
<p>This HTML was loaded from an external file!</p>

我希望有人从中受益：）

Answer 2

Popup在浏览器中已经过时，请尝试使用fancybox或bootstrap模式，请参阅下面的模型！

https://v4-alpha.getbootstrap.com/components/modal/

The code to popup modern 
https://codepen.io/brandonb927/pen/wJaIi

http://fancyapps.com/fancybox/

Popup.js - 加载外部HTML内容根本不起作用

2 个答案: