ModalJS – Ajax Content example

This example loads the content via ajax from an external URL.
“type” can be either img, html or iframe. “src” has to be a valid URL/path to the image or file.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="modaljs/assets/dist/index.bundle.js"></script>
        <link rel="stylesheet" href="modaljs/assets/dist/index.bundle.js.css">
    </head>

    <body>
        <div id="element">
            <div class="open_mdl_btn">OPEN POPUP</div>
            <div class="mdl_content"><!-- Loaded by Ajax --></div>
        </div>

        <script>
            $("#element").modalJS({
                content: {'type':'img', 'src':'img/surfer.jpg', 'width':'100%'}
            });
        </script>
    </body>
</html>

Example loading image

The Image option will load external images directly in to the modal content.

OPEN POPUP

Example loading HTML

The HTML option allows you to load plain text files in to the modal content.

$("#element").modalJS({
    content: {'type':'html', 'src':'content/ajax_loaded.html'}
});

OPEN POPUP

Example loading Iframe

The Iframe option allows you to load external HTML(5) files in to the modal content. The file will be loaded in to an iframe.

$("#element").modalJS({
    content: {'type':'iframe', 'src':'content/html5/index.html', 'style':{'width':'300px', 'height':'250px'}}
});

OPEN POPUP