javascript - 如何将交互式内容添加到 Bootstrap 弹出窗口？

Question

我有一个显示大 amMap 的网站. map 不需要一直可见，所以我想隐藏 map 并仅在用户单击按钮时显示它。 Bootstrap 的弹出窗口似乎是处理此问题的完美方式。

基本思路是:

<button id="mapbutton" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right">Map</button>
<div id="mapcontent" style="display: none;">
    <div id="map" style="width: 500px; height: 500px;"></div>
</div>

$(function() {
    $('#mapbutton').popover({
        html: true,
        content: function() {
            return $('#mapcontent').html();
        }
    });
});

这是我看到的:

我有两个问题:

1. 显示的 map 不是交互式的。我无法点击它。它看起来像一张静态图片。我不确定如何让它互动。没有popover options看起来他们会解决交互性问题。
2. 工具提示窗口没有适当缩放。我猜我必须做一些 CSS 工作来解决这个问题。

我该如何解决这些问题？

Answer 1

问题一

在弹出内容加载后绑定(bind)事件，使用事件shown.bs.popover:

    $('#mapbutton').on('shown.bs.popover', function () {
        $('#mapMinus').click(MyMap.ZoomOut);
        $('#mapPlus').click(MyMap.ZoomIn);
        $('#mapLeft').click(MyMap.GoLeft);        
        [...]
    }) 

** 更新:

通过重用 Bootstrap 类创建您自己的“弹出窗口”:

<a id="mypopover">
    Lorem Ipsum    
</a>
<div id="popoverContent" class="popover fade bottom in">
    <div class="arrow" style="left: 9.375%;"></div>
    <div class="popover-content">
        <a id="clickmewouldntwork">Event: Click me! (after load page, not binding after popover)</a>
        <div id="gotit"></div>
    </div>
</div>

CSS:

.popover {
    max-width: none;
    top: 20px;
}

JS:

$('#clickmewouldntwork').click(function(){
    $('#gotit').append('#');
});

$('#mypopover').click(function(){
    var $target = $('#popoverContent');
    $target.toggle(!$target.is(':visible'));
});

See fiddle

问题二

你必须覆盖 bootstrap .popover { max-width: 276px; :

     .popover {
          max-width: none;
     }

See fiddle