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

我认为这不适用于$（＆＃34; .jvectormap-region＆＃34;），因为地图区域是用dinamically创建的，我不太确定。

我该怎么办？

谢谢

Answer 1

好吧，我找到了解决问题的方法，这很简单，只需将其添加到jvectormap：

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

Colorbox无法使用jvectormap

1 个答案: