javascript - jQuery 插件或带有 css 的 jQuery 用于弹出窗口

Question

我需要使用 Jquery 获得这种弹出窗口，请推荐 Jquery 插件或任何示例。我找不到开始这个的想法。

Answer 1

希望对您有所帮助。

HTML

<a href="#" rel="popover" data-popover-content="#myPopover">My Popover</a>

<div id="myPopover" class="hide">

   <div class="left_box">
     <p><i class="fa fa-envelope"></i> Email</p>
     <p><i class="fa fa-download"></i> Download</p>
     <p><i class="fa fa-print"></i> Print</p>
   </div>

   <div class="right_box">
     <p>Audit Logs</p>
   </div>

</div>

CSS

.popover {width:400px;}
.left_box {
  width:50%;
  float:left;
  padding-left: 10px;
  border-right: 1px solid #ccc;
}
.right_box {
  width:50%;
  float:right;
  padding-left: 20px;
}

jQuery

$(document).ready(function(){

    $(function(){
    $('[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();
    });
  });

});

请包括 jQuery 和 Bootstrap。