Question

有人可以建议我如何使用URL加载弹出窗口我想要像pinterest网站（https://www.pinterest.com/）一样。因此，它可以帮助使用不同的URL进行Facebook评论。

我只是将参数附加到当前URL，这对FB评论没有帮助。

好的，我在下面添加了我的代码：弹出代码：

<a class="" href="/log/viewlist?id={{$data->id}}"  data-target="#myModal" data-toggle="modal">My modal</a>


<div id="myModal" class="modal fade">
<div class="modal-dialog">
    <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Event Name</h4>
            </div>
            <div class="modal-body">
                <p>Details</p>
            </div>
            <div class="fb-comments"  data-width="500"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
    </div>
</div>

Jquery：

$('#myModal').on('show.bs.modal', function (e) {

    window.location.url = "/log/viewlist?id=" +  $(this).attr('href');
    var url = $(this).attr('href');
    $('.fb-comments').attr('data-href',url);

});

我的页面加载了这个但是facebook data-href将这个作为不同的url，但是我在一个弹出窗口上做的评论这些评论出现在每个模态但我想显示仅针对该模态弹出窗口更新的评论。

那么有没有其他方法可以加载带有URL的模态，可以单独为Facebook评论。

请提出任何建议。谢谢！

Answer 1

您可以通过模糊背景然后设置前景样式来创建此效果。

.blur {
  z-index: -1;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  -webkit-filter: blur(2px);
  background: url(http://hackingui.com/wp-content/uploads/2014/05/meng2-1980x1000.jpg) no-repeat;
  background-size: cover;
}

#fore {
  font-weight:bold;
  padding:10px;
  background:white;
  border:2px solid black;
}

<div class="blur">
  <div id="back">
  filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text 
  </div>
</div>

<div id="fore">
  Testing stuff
</div>

使用jquery使用不同的动态URL加载弹出窗口

1 个答案: