内容。
我使用JVectorMap创建了一个世界地图，我想使用Shadowbox.js打开一个盒子，显示关于每个突出显示的国家的各种信息-在这个例子中，它是特别的中东和北非国家。
地图工作，弹出的工作，但我的div<div>TEST</div>没有显示在所有，我得到一个错误:"它可能已被移动，编辑或删除。">
下面是我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>jVectorMap</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<link rel="stylesheet" href="jquery-jvectormap-2.0.5.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="jquery-jvectormap-2.0.5.min.js"></script>
<script src="jquery-jvectormap-world-mill-en.js"></script>
<script src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
language: 'en',
players: ['iframe','html']
});
</script>
</head>
<body>
<div id="world-map" style="width: 600px; height: 400px"></div>
<script type="text/javascript">
$(function(){
var codes = ['DZ','EG','IR','IQ','IL','JO','KW','LB','LY','MA','OM','QA','SA','TN','AE','YE'];
$('#world-map').vectorMap({
map: 'world_mill_en',
zoomMax: 20,
backgroundColor: '#505050',
regionStyle: {
initial: {
fill: '#F6F5F4'
},
hover: {
fill: '#F6F5F4',
"fill-opacity": 1
},
selected: {
fill: '#7B8B9B'
},
selectedHover: {
cursor: 'pointer',
fill: '#002142'
}
},
selectedRegions: ['DZ','EG','IR','IQ','IL','JO','KW','LB','LY','MA','OM','QA','SA','TN','AE','YE'], onRegionClick: function (event, code) {
if($.inArray(code,codes) > -1) {
Shadowbox.open({
content: '<div>TEST</div>',
title: "MENA",
player: "iframe",
height: 400,
width: 640
});
}
}
});
});
</script>
</body>
</html>
我想对每个代码有不同的消息，但现在我只想让这个工作。
感谢您的帮助。
我想明白了，这件事不应该花这么长时间。因为我想让shadowbox显示html，所以我需要html player:
player: "html",
之后一切正常。