Hide/Show div 事件

Question

我正在使用 bootstrap 显示和隐藏模态，属性 data-toggle 和 data-target

当模式打开时，它应该加载一个 google 地图，您必须调用调整大小事件以便显示地图（例如当您单击 F12 时，已知问题）

问题是，我不能使用这个调整大小的解决方案，因为我不是 showing/hiding (adding/removing class) 手动， bootstrap class正在处理这个，所以我不知道在哪里调用 resize

这是模态

的 'header'

<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>

如果我在任何按钮中调用它（在用户单击它时加载后），就会显示地图

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

但是我想在加载时加载它，我已经在'myMap'（js文件中的google map方法）中尝试过，当文档准备好时（但是div 是隐藏的，所以不起作用）和无处不在。

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

提前致谢

Answer 1

我相信您正在寻找 modal events。使用这个你应该能够触发一些代码来执行一旦模态显示如下：

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

Hide/Show div 事件

Hide/Show div event

html

javascript

jquery

google-maps

hide