javascript - 隐藏/显示 div 事件

Question

我使用 bootstrap 来显示和隐藏模式、属性 data-toggle 和 data-target

当模式打开时，它应该加载谷歌地图，您必须调用调整大小事件才能显示 map (就像您单击 F12 时，已知问题)

问题是，我无法使用此调整大小解决方案，因为我没有手动显示/隐藏(添加/删除类)，引导类正在处理此问题，所以我不知道在哪里调用调整大小

这是模式的“标题”

<div class="modal fade" id="locateDialog" tabindex="-1" 
   role="dialog" aria-labelledby="Stripe Payment" aria-hidden="true">

<div class="col-md-12">
  <div  id="googleMapUser" class="mapUser">

  </div>
</div>

这就是它的名字(点击图标)

<div class="col-md-12">
  <h3><i class="icon-user" style="font-size:48px;" 
        data-toggle="modal" data-target="#stripeDialog">
        </i>&nbsp; My Levels</h3>
</div>

如果我在任何按钮内调用它(在用户单击它时加载后)，则会显示 map

google.maps.event.trigger($('#googleMapUser')[0], 'resize');

但是我想在加载时加载它，我已经在“myMap”(js文件中的谷歌地图方法)内部尝试过，当文档准备好(但div被隐藏所以不起作用)和到处.

我应该在哪里调用调整大小？除了突变观察者还有其他选择吗？

提前致谢

Answer 1

我相信您正在寻找 modal events 。使用此功能，一旦模式显示如下，您应该能够触发一些代码执行:

$('#myModal').on('shown.bs.modal', function (e) {
    // do something...
});