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%" 
    }); 
}