Shadowbox.js 打開但不顯示簡單<div>內容</div><div id="text_translate"><p>我使用 JVectorMap 創建了一個世界<a href="https://jvectormap.com/" rel="nofollow noreferrer">map</a> ，我想使用<a href="https://www.shadowbox-js.com/" rel="nofollow noreferrer">Shadowbox.js</a>打開一個框，顯示每個突出顯示的國家/地區的各種信息 - 在這個例子中，它特別是 MENA 國家/地區。</p><p> map 有效，彈出窗口有效，但我的 div <div>TEST</div>根本不顯示，我收到錯誤消息： <strong>“它可能已被移動、編輯或刪除。”</strong></p><p> 這是我的代碼：</p><pre> <,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></pre><p> 更進一步，我希望每個代碼都有不同的消息，但現在我只想讓它工作。</p><p> 任何幫助表示贊賞。</p></div>

Question

我使用 JVectorMap 創建了一個世界map ，我想使用Shadowbox.js打開一個框，顯示每個突出顯示的國家/地區的各種信息 - 在這個例子中，它特別是 MENA 國家/地區。

map 有效，彈出窗口有效，但我的 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>

更進一步，我希望每個代碼都有不同的消息，但現在我只想讓它工作。

任何幫助表示贊賞。

Answer 1

我想通了，這是不應該花這么長時間的事情。 因為我想讓 shadowbox 顯示 html，所以我需要 html 播放器：

player:     "html",

之后一切正常。

問題描述

1 個解決方案

解決方案1
1 已采納 2022-11-23 09:12:35

問題描述

1 個解決方案

解決方案1 1 已采納 2022-11-23 09:12:35

解決方案1
1 已采納 2022-11-23 09:12:35