Colorbox不能與jvectormap一起工作

Question

我想通過點擊一個國家打開一個彩盒，但它不工作。

HTML：

.... 
<div class="row"> 
    <div class="col-md-12 text-center">     
    <div id="world-map"></div> 
    <span class="test">test</span> 
    </div> 
</div> 
.... 

<!--colorbox content inline --> 
<div style='display:none'> 
    <div id='inline_content' style='padding:10px; background:#fff;'> 
     <p><strong>Content</strong></p>     
    </div> 
</div> 
... 

JS：

... 

$('#world-map').vectorMap({ 
       map: 'world_mill',    
       series:{ 
        regions:[{ 
         values: countries                  
        }] 
       },     
       backgroundColor: "#ffffff", 
       zoomOnScroll: false, 
       zoomButtons: !1, 
       regionStyle: { 
        initial: { 
         fill: "#c2e1f8" 
        }, 
        hover: { 
         fill: hover_color, 
         "fill-opacity": 1 
        } 
       }, 
       markerStyle: { 
        initial: { 
         fill: "#000",       
         stroke: "#fff"       
        }, 
        hover:{       
         stroke:"#fff" 
        } 
       },        

       onRegionTipShow:function(e, tip, code){      

        if ($.inArray(code, all_countries) == -1){       
         e.preventDefault();       
        }      
       }, 
       onRegionOver:function(e, code){      


        if ($.inArray(code, all_countries) == -1 ){       
         e.preventDefault();       
        } 

       } 

      }); 




$(".jvectormap-region").colorbox({ 
            inline:true, 
            href:"#inline_content", 
            width:"50%" 
         }); 

我也嘗試用這個和它的工作：

$(".test").colorbox({ 
            inline:true, 
            href:"#inline_content", 
            width:"50%" 
         }); 

我想這是不以$工作（」。 jvectormap-region「），因爲地圖區域是以二進制創建的，所以我不太確定。

我該怎麼辦？

謝謝

Answer 1

好吧，我發現了一個辦法來解決這個問題，真的很簡單，只需添加這jvectormap：

onRegionClick:function(e, code){ 
    $.colorbox({ 
     inline:true, 
     href:"#inline_content", 
     width:"50%" 
    }); 
}