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

Question

我需要使用Jquery获取这种弹出窗口，请建议Jquery插件或任何示例。我无法找到启动它的想法。

Answer 1

希望这会对你有所帮助。

<强> HTML

[{"user_id":1,"count":3}] 

<强> CSS

<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>

<强>的jQuery

.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和Bootstrap。

Answer 2

是否需要具有此特定布局？

也许您可以开始使用jQuery UI Dialog并稍微编辑一下以填充链接。

Answer 3

我会选择轻量级的Bootstrap Tooltip或Popover。他们带有BootstrapJS。点击此处：http://www.w3schools.com/bootstrap/bootstrap_popover.asp

实现：

$(document).ready(function(){
    $('[data-toggle="popover"]').popover(); 
});

在任何元素中

data-toggle="popover" data-placement="top" data-content="Content"

在您的情况下，您需要设置popover参数以接受html

  $(document).ready(function(){
        $('[data-toggle="popover"]').popover({
           html: true,
        }); 
    });

@Edit

或者您可以尝试使用WebUI https://github.com/sandywalker/webui-popover