Bootstrap 3 - Popover div html - программирование

Это работает, но заставляет меня сделать двойной щелчок по ссылке, и он должен работать всего одним щелчком мыши.

Одна вещь, этот пример очень хорошо, но мне нужно применить некоторые изменения, я хочу то же самое, но из ссылки я открываю одно модальное окно, загружающее json файл,

В json файле есть ссылки на изображение, которые открывают popover, как вы показали мне (я использую bootstrap-table для загрузки json файла)

Этот код js для загрузки json файла с помощью начальной загрузки:

Ответы

Ответ 1

Есть код для нормализации bootstrap popovers:

умножить popovers
popovers с кнопкой закрытия
закрыть клик за пределами popover
popover с пользовательским HTML

Просмотрите демонстрацию

Исходный код скачать

    $( document ).ready(function() {

$('.popup-window').popover({
    html: true,
    title : '<button type="button" class="close" onclick="$(&quot;.popup-window&quot;).popover(&quot;hide&quot;);">&times;</button>',
    trigger: 'manual',
    content: function () {
        return $(this).next('.popup-content').html();
    }
}).click(function(e) {
    $(this).popover('toggle');
    $('.popup-window').not(this).popover('hide');

    e.stopPropagation();
});

$('body').on('click', function (e) {
    $('.popup-window').each(function () {
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });

});

и html

        <div class="actions">

        <!-- Action  -->
        <div class="popup-window" data-placement='left'>
            <i title='Share' class="btn-popup fa fa-share-alt"></i>
        </div>
        <div class="popup-content hide">
            <div class="socialShare">
                <label class="form-group">Share:</label>
                <div class="well">
                    <a title="Share on twiiter" target="_blank" href="#">
                        <i style="font-size: 40px;" class="fa fa-twitter-square"></i>
                    </a>
                    <a title="Share on facebook" target="_blank" href="#">
                        <i style="font-size: 40px;" class="fa fa-facebook-square"></i>
                    </a>
                </div>
            </div>
        </div>

        <!-- Action -->
        <div class="popup-window" data-placement='bottom'>
            <i  title='Respond To Review' class="btn-popup fa fa-share-square-o"></i>
        </div>
        <div class="popup-content hide">
            <div class="">
                <label class="form-group">Respond To Review:</label>
                <div class="form-group">
                    <textarea class="form-control">Great song BRO!</textarea>
                </div>
                <div class="form-group">
                    <button class="btn btn-primary respondToReview width100" onclick="respondToReview(this);">Post Response</button>
                </div>
            </div>
        </div>



    </div>

и css

   .actions .popover-content {
    padding: 20px 40px;
}
.actions .popup-window,
.action-link {
    display: inline-block;
    margin-right: 5px;
    line-height: 20px;
    border-radius: 5px;
    padding: 7px;
    width: 34px;
    height: 34px;
    background-color: #2fa0e5;
    color: #fff;
    cursor: pointer;
}
.actions .popup-window:hover,
.actions .popup-window:focus,
.action-link:hover,
.action-link:focus {
    opacity: 0.85;
}
.action-link:last-child,
.actions .popup-window:last-child {
    margin-right: 0;
}
.btn-popup.fa {
    font-size: 20px;
    cursor: pointer;
}
.actions .popover-title {
    background-color: transparent;
    border-color: transparent;
    float: right;
}
.actions .popover-content .form-group:first-child {
    margin-top: 10px;
}
.actions .popover-content .well {
    background-color: transparent;
    border-color: transparent;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    box-shadow: none;
}
.actions .popover-content .well a {
    margin: 0 10px 0 0;
}

Ответ 2

  <div class="div-popover">
///HTML content here
  </div>
    .div-popover {
        background-color: white;
        border-radius: 8px !important;
        box-shadow: -1px 1px 9px 5px rgba(0,0,0,0.4);
        font-size: 12px;
        padding: 7px 10px;
        position: absolute;
        width: 250px;
        bottom: -4px;
    }

    .div-popover:after {
        content: "";
        position: absolute;
        bottom: -10px;
        left: 175px;
        border-style: solid;
        border-width: 25px 25px 0;
        border-color: #FFFFFF transparent;
    }