如何在未选中图层时关闭模态窗口

How to close modal window when layer unchecked from control

本文关键字：模态 窗口 图层      更新时间：2023-09-26

当用户从菜单中选中图层时，会弹出一个模态窗口。用户可以通过按下窗口上的"X"图标或点击地图来关闭这个模态窗口。然而，当用户从菜单中取消选中图层时，模态将再次弹出。

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

注意:我使用传单的地图和Bootstrap的模式。

下面是我假设的代码:

modal的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 ...
}
});

代码:

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;
相关文章：