У меня возникли проблемы с появлением встроенного содержимого 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>
Раньше я никогда не использовал ShadowBox. Таким образом, остальное просто предполагает, что он работает так, как я думаю, он работает.
Поскольку вы используете метод.html(), он получает полный HTML, а не внутренний HTML, поэтому он также получает часть div, которая имеет дисплей: 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>
Это отлично работает для меня.