Nowy popover

by orideith

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="container">
    <div class="text-center row-fluid">
         <h2>Extended popover example</h2>

        <p>Click on buttons to see how it works</p>
        <button class="btn btn-danger popover-area" title="This is a test" data-placement="bottom" data-content="This is a popover body<br /><ul><li>option1</li><li>option2</li></ul>"> <i class="icon-white icon-remove"></i> Example 1</button>
        <button class="btn btn-success popover-area" title="Second test" data-placement="bottom" data-content="This is second popover body<br /><ol><li>option1</li><li>option2</li></ol>"> <i class="icon-white icon-ok"></i> Example 2</button>
    </div>
    <div class="row-fluid well">
        <ul>
            <li>Only one popover is active on the page</li>
            <li>Closing div appears</li>
        </ul>
    </div>
    <p class="text-center"><small class="muted">&copy; <a href="http://marekpietrzak.pl">mheki</a></small>

    </p>
</div>

CSS

.container { margin: 10px; }
.row-fluid { margin-bottom: 20px; }

JavaScript

// destroy every opened popover
function destroyOpenedPopovers() {
    //if we have an information about opened popover
    if ($('#closingDiv').length && $('#closingDiv').attr('data-popover-id') !== 'undefined') {
        var popoverLinkId = $('#closingDiv').attr('data-popover-id');
        $('#' + popoverLinkId).popover('destroy');
        $('#' + popoverLinkId).removeClass('popover-active');
    } else {
        // else we try to destroy every possibly opened popover
        $('.popover-area').each(function () {
            $(this).popover('destroy');
            $(this).removeClass('popover-active');
        });
    }
}

function triggerPopover(obj) {
    // toggle popover-active class (popover opened/closed)
    $(obj).toggleClass('popover-active');

    // if popover should be opened
    if ($(obj).hasClass('popover-active')) {
        $(obj).popover({
            html: true,
            trigger: 'manual'
        });
        $(obj).popover('show');
        var closingDiv = '<div id="closingDiv" data-popover-id="' + $(obj).attr('id') + '" style="z-index: 1008; background-color: rgba(0, 0, 0, 0.1); width: ' + $(document).width() + 'px; height: ' + $(document).height() + 'px; position: absolute; top: 0; left: 0"></div>';
        $('body').append(closingDiv);
        $('#closingDiv').click(function () {
            destroyOpenedPopovers();
            $(this).remove()
        });
    }
}

$(document).ready(function () {
    $('.popover-area').click(function () {
        triggerPopover(this);
    });
});