通过单击几何体激活模态

Question

我必须在单击几何图形时显示 Bootstrap 的模态。使用以下代码，我可以获取几何图形的 pk，检查它是否存在于字典中，然后获取模态 ID：

map.on('singleclick', function(evt) {
  attributeTable = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
    return feature;
  });

  const storyPointDict = [
  {% for storypoint in single_object.stop_point.all %}
      {
        id: {{ storypoint.id }},
        modal_name: 'storyPoint{{ storypoint.id }}'
      },
      {% if forloop.last %}{
        id: {{ storypoint.id }},
        modal_name: 'storyPoint{{ storypoint.id }}'
      }{% endif %}
  {% endfor %}
  ];

  if (attributeTable) {
    const fid = attributeTable.get('pk');

    for (var key in storyPointDict) {
      if (fid == storyPointDict[key].id) {
        let value = storyPointDict[key].modal_name;

        $(value).modal('show');
      }
    }
  }

});

因此，对于 $(value).modal('show');，我相信可以显示具有特定 ID 的模态，但事实并非如此。

我怎样才能做到这一点？

我正在使用 Django，我能够显示正确激活模式的按钮列表。

{% for storypoint in single_object.stop_point.all %}
        <button class="btn btn-info btn-sm" data-toggle="modal" data-target="#storyPoint{{ storypoint.id }}">
...
        </button>
    <div class="modal fade" id="storyPoint{{ storypoint.id }}" tabindex="-1" role="dialog" aria-labelledby="storyPoint{{ storypoint.id }}Title" aria-hidden="true">
      <div class="modal-dialog modal-dialog-scrollable" role="document">

        <div class="modal-content">
...

        </div>

      </div>
    </div>
{% endfor %}

我想显示一个现有的模式，如果我点击一个按钮，它运行但如果我点击一个几何图形，它不会运行。

Answer 1

自行解决。问题是主题标签。

$('#'+value).modal('show');

通过单击几何体激活模态

Activate a modal by clicking on a geometry

javascript

openlayers

bootstrap-modal