Question

我正在使用bootstrap显示和隐藏模态，属性数据切换和数据目标

当模态打开时，它应该加载一个谷歌地图，你必须调用resize事件，以便显示地图（就像你点击F12，已知问题）

问题是，我不能使用这个调整大小的解决方案，因为我没有手动显示/隐藏（添加/删除类），bootstrap类正在处理这个，所以我不知道在哪里调用resize

这是模态

的'标题'

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

隐藏/显示div事件

1 个答案: