Question

我无法将内联HTML内容显示在Shadowbox中。这是我试过的。当我点击“Click Me”按钮时，会出现Shadowbox叠加层，但只是旋转和旋转而不显示内容。

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

Answer 1

我之前从未使用过ShadowBox。所以剩下的就是假设它按我认为的方式工作。

由于您使用 .html（）方法，因此它获取完整的HTML，而不是内部HTML，因此它也获得了div部分，然后 display：none; 在其CSS中。你能尝试获取内部HTML并尝试吗？

修改

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

这对我很有用。

使用Shadowbox.js打开内联HTML div

1 个答案: