Inline HTML div open with Shadowbox.js

I am having trouble getting inline HTML content to appear in a Shadowbox. Here is what I tried. When I click the "Click Me" button, the Shadowbox overlay appears, but just spins and spins without displaying the content.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Modal Dialog Box Test</title>
<link href="shadowbox/shadowbox.css" rel="stylesheet" type="text/css">
<style type="text/css">
    body {
        padding: 20px;
    }

    .btn {
        padding: 10px 15px;
        background-color: #DDD;
        border: 1px solid #CCC;
        border-radius: 5px;
        text-decoration: none;
        color: #333;
    }

    #box {
        background-color: #EEE;
        text-align: center;
        padding: 20px;
        display: none;
    }
</style>
</head>

<body>

<div id="box">
    <h1>MODAL DIALOG</h1>
    <p>This is a test.</p>
</div>

<a class="btn" href="#">Click Me</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="shadowbox/shadowbox.js" type="text/javascript"></script>

<script>
Shadowbox.init({
    skipSetup: true
});

$('.btn').click(function() {
    var content = $('#box').html();
    Shadowbox.open({
        content: content,
        player: 'html',
        displayNav: false,
        height: 400,
        width: 200
    });
});
</script>

</body>
</html>

Answers


I have never used ShadowBox before. So the rest is just assuming it works the way I think it works.

Since you use the .html() method it gets the full HTML, not the inner HTML, so it gets the div part too which then has display: none; in its CSS. Can you try getting the inner HTML and trying that?

EDIT:

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Modal Dialog Box Test</title>
<link href="shadowbox/shadowbox.css" rel="stylesheet" type="text/css">
<style type="text/css">
    body {
        padding: 20px;
    }

    .btn {
        padding: 10px 15px;
        background-color: #DDD;
        border: 1px solid #CCC;
        border-radius: 5px;
        text-decoration: none;
        color: #333;
    }

    #box {
        background-color: #EEE;
        text-align: center;
        padding: 20px;
    }
</style>
</head>

<body>

<div id="sbdiv" style="display: none;">
    <div id="box">
        <h1>MODAL DIALOG</h1>
        <p>This is a test.</p>
    </div>
</div>

<a class="btn" href="#">Click Me</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="/shadowbox/shadowbox.js" type="text/javascript"></script>

<script>
Shadowbox.init({
    skipSetup: true
});

$('.btn').click(function() {
    var content = $('#sbdiv').html();
    Shadowbox.open({
        content: content,
        player: 'html',
        title: "Hi",
        displayNav: false,
        height: 400,
        width: 200
    });
});
</script>

</body>
</html>

This works great for me.


Need Your Help

Passing a filename via a variable to tar from within PHP?

php exec tar

I am trying to ultimately extract some files from a tar archive within PHP, however my simple test script is failing at the first part, which was to simply list the files in the archive.