Popup.js - load external HTML content simply doesn't work

Question

I'm trying to load an external HTML file in a popup using the Toddish pop-up library (https://github.com/Toddish/Popup).

My situation is as follows: I want to load some HTML stored in an external file into the popup, but the library simply refuses to do this even though I do exactly the same thing as the documentation demo. When I click the link that should trigger the popup, nothing happens. I have the popup.css and jquery.popup.js files in the right location and they are the latest version.

This is testpopup.html:

<!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>

This is the file I'm trying to load, testcontent.html:

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

When I right-click on the link and select Open this page in a new Tab my browser (Firefox 57.0.1) takes me to the page just fine.

I can manually specify the content and than I see a popup with that content. I've thought about just specifying an iframe linking to testcontent.html as a workaround of my issue, but I've always heard iframes are evil so I'd rather not do that.

Is there someone who has a solution?

Thanks very much in advance, Joshua

score 1 · Answer 1 · answered Dec 15 '17 at 21:28

Thank you for this pointer, Rafael Castelani! That was what I needed. I made my modal in Bootstrap. Here is some example code I made for others. The code is explained in the comments:

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>

I hope someone benefits from this :)

score 0 · Accepted Answer · answered Dec 15 '17 at 14:15

0

Popup is obsolete in browsers, try using fancybox or a bootstrap modal, see the models below!

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

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

http://fancyapps.com/fancybox/

answered Dec 15 '17 at 14:15

Rafael Castelani

100
6

Popup.js - load external HTML content simply doesn't work

2 Answers2