Question

当用户从菜单中检查图层时，我会弹出一个模态窗口。用户可以通过按窗口上的“X”图标或单击地图来关闭此模态窗口。 但是，当用户从菜单中取消选中图层时，模式会再次弹出。

我需要帮助编写代码，以便当用户从菜单中取消选中图层时，模式不会再次弹出。

注意：我使用Leaflet作为地图，使用Bootstrap作为模态。

这是我的假设代码：

模式的HTML：

<div id="myRouteModal">blah blah</div>

自定义图层菜单的HTML：

<label><input id="myRoute" type="checkbox" class="check">My Route</label>

JS用于自定义菜单控制：

var overlaysMenuCtrl = L.Control.extend({ ... blah blah... });

map.addControl(new overlaysMenuCtrl)());

JS：

function toggleLayer(checked, layer){
    if(checked){
        map.addLayer(layer);
    } else {
        map.removeLayer(layer);
    }
}

$(".check").change(function(){
    var layerClicked = $(this).attr("id");
//Turn layers on and off based on the ID of the radio checked
   switch(layerClicked){
    case "myRoute": toggleLayer(this.checked, myRoute);
        $('myRouteModal').modal(modalOptions);
    break;
    ...and other layers ...
}
});

Answer 1

您的代码：

switch(layerClicked){
    case "myRoute": toggleLayer(this.checked, myRoute);
        $('myRouteModal').modal(modalOptions);

您每次都致电$('myRouteModal').modal(modalOptions);。相反，如果选中了单击的复选框，则必须进行测试。只有选中复选框，才能调用.modal() - 函数。

正确的代码是：

case "myRoute": toggleLayer(this.checked, myRoute);
    if(this.checked) {
        $('myRouteModal').modal(modalOptions);
    }
break;

如何从控件中取消选中图层时关闭模态窗口

1 个答案: