Shadowbox.js点击JVectorMap国家弹窗不显示<div>内容问题

你的问题核心是Shadowbox的player参数设置错误：你传入的是HTML字符串内容，但指定了iframe播放器——iframe播放器是用来加载外部URL的，不是直接渲染HTML代码的，所以才会出现内容找不到的报错。

只需要把player的值从"iframe"改成"html"，就能正常显示<div>TEST</div>内容了。

修改后的关键代码片段 #

Shadowbox.open({
  content:    '<div>TEST</div>',
  title:      "MENA",
  player:     "html", // 切换为html播放器
  height:     400,
  width:      640
});

完整修正代码 #

<!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:     "html",
              height:     400,
              width:      640
            });
          }
        }
      });
    });
    </script>

</body>
</html>

后续扩展建议 #

如果要给每个国家设置不同内容，可以提前定义一个对象存储国家代码对应的HTML内容，比如：

var countryContents = {
  'DZ': '<div>阿尔及利亚相关信息</div>',
  'EG': '<div>埃及相关信息</div>',
  // 其他国家内容依次添加...
};

然后在onRegionClick事件中动态获取对应内容：

content: countryContents[code] || '<div>暂无该国家信息</div>',

内容的提问来源于stack exchange，提问作者OverdueOrange