相关疑难解决方法(0)

是否可以拥有自定义引导程序弹出窗口？

我的意思是我希望能够使用

$('#example').popover(options)

所以点击一个元素#example,我会传递一些文字(可以在可编辑的textarea中显示);

我正在使用bootstrap 2.3.2

我基于这个例子:https: //jsfiddle.net/hL0pvaty/

但是popover必须包含一个html div,因此,我想要的是第一个和第二个链接之间的混合:https: //maxalley.wordpress.com/2014/08/19/bootstrap-3-popover-with-html -内容/

这是js代码:

$(document).on("click", ".show-popover-div", function (e) {
    $('[rel="popover"]').popover({
        container: 'body',
        html: true,
        content: function () {
            var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
            return clone;
        }
    }).click(function(e) {
        e.preventDefault();
    });
});

这有效,但迫使我双击链接,只需点击一下即可.

有一件事,这个例子非常好,但我需要应用一些更改,我想要相同的,但从链接,我打开一个加载json文件的模态窗口,

json文件有一个打开popover的图像链接,就像你给我看的那样(我使用bootstrap-table来加载json文件)

这是json文件:

[
    {
        "col1": "<a href='#'>13560431</a>",
        "col2": "<a href='#' class='popup-window' data-placement='left'><img src='img/ico_add_td.png' /></a>"
    },
    {
        "col1": "<a href='#'>44560422</a>",
        "col2": "<a href='#' class='popup-window' data-placement='left'><img src='img/ico_add_td.png' /></a>"
    }
]

这是使用bootstrap-table加载json文件的js代码:

$("#table-alert2").bootstrapTable({
    url: 'data-table-alert2b.json',
    columns: [{
        field: 'col1'
    }, {
        field: 'col2'   
    }, …

我遇到了一个问题，我无法弄清楚为什么弹出窗口内的 HTML 标签不会被渲染。

JS小提琴在这里： http: //jsfiddle.net/792xcgju/

    <!-- Popover #1 -->
<a href="#" class="btn btn-primary" tabindex="0" data-toggle="popover" data-trigger="focus" data-popover-content="#a1" data-placement="top">Popover Example</a>

<hr>

<!-- Popover #2 -->
<a href="#" class="btn btn-primary" tabindex="0" data-toggle="popover" data-trigger="focus" data-popover-content="#a2">Popover Example</a>



<!-- Content for Popover #1 -->    
<div id="a1" class="hidden">
    <div class="popover-heading">This is the heading for #1</div>

    <div class="popover-body">


      <div class="pagination_content">
          <div class="page-jump-form">
          <div class="input-group input-group-sm">
              <input type="number" class="inputbox form-control"  min="1" max="999999" />
            <div class="input-group-btn">
              <input type="button" class="btn btn-default btn-sm" value="{L_GO}" />
            </div>
          </div>
        </div>  
      </div> 


    </div> …

我正在使用 Bootstrap Popover，弹出窗口内容是 HTML。我使用下面的代码来初始弹出窗口。此代码基于/sf/answers/924271351/这个答案。弹出窗口内容位于 id 的 div 中#song-status-popover。

$(".song-status-link").popover({
            html: true,
            placement: 'bottom',
            content: function () {
                return $("#song-status-popover").html();
            }
});

我想在单击弹出窗口外部时关闭弹出窗口，因此我使用了以下代码：

$('html').on('mouseup', function (e) {
            if (!$(e.target).closest('.popover').length) {
                $('.popover').each(function () {
                    $(this).closest('div.popover').popover('hide');
                });
            }
});

到目前为止，它运行得很好，但我在同时使用这两个代码时面临一个问题。当我打开弹出窗口并单击外部将其关闭时，如果我再次单击链接以打开弹出窗口，则第一次单击时它不会打开。我必须点击两次才能打开它。

我想知道我缺少什么以及为什么我在通过单击外部关闭弹出窗口后无法一键打开弹出窗口。请帮忙！

更新：我相信，当我单击外部时，它会隐藏弹出窗口，但引导程序仍然认为它是打开的，第一次单击时，它实际上认为它已关闭，第二次单击时，它打开弹出窗口。