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

【问题标题】：jQuery plugin or jQuery with css for popup用于弹出窗口的 jQuery 插件或带有 css 的 jQuery
【发布时间】：2016-09-02 04:25:55
【问题描述】：

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

【问题讨论】：

你含糊其辞，我想这就是你投反对票的原因。如果您不确定如何执行高级操作来实现这一点，我建议您查看 Lightbox 或 Highslide。 Highslide 非常酷，因为它可以在您指定的任何大小的窗口内显示大量类型的数据，而无需您学习太多代码。如果您真的想要一个不错的自定义解决方案，您将需要下面的 jQuery/Javascript 解决方案，其中涉及一些学习

标签： javascript jquery css jquery-ui jquery-plugins

【解决方案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。

【讨论】：

【解决方案2】：

它需要有这个特定的布局吗？

也许您可以开始使用 jQuery UI Dialog 并进行一些编辑以填充您的链接。

【讨论】：

【解决方案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"

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

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

@编辑

或者你可以试试 WebUI https://github.com/sandywalker/webui-popover

【讨论】：

我不能在这里使用引导程序。
M，是的，似乎这个可以工作，但我找不到这个的代码示例。