Question

我需要一些javascript和datalife引擎的帮助。

我的帖子上有一个youtube视频，显示调用.tpl文件（模板文件）标签

[xfvalue_treyler]

基本上，这会获取该特定帖子上“treyler”字段上的信息。就我而言，该值是youtube视频的iframe代码。

我一直在研究，我发现这个javascript代码用于我想要使用的内容。

<script type="text/javascript">
    var self = $(this) //button
    , content = $('.content'); 

    $('element_to_pop_up').bPopup({
        onOpen: function() {
            content.html(self.data('bpopup') || '');
        },
        onClose: function() {
            content.empty();
        }
    });
</script>

我用

来称呼它

<div class="element_to_pop_up">[xfvalue_online]</div>

我给了一些随机的css来定义类“element_to_pop_up”，但由于某种原因，这似乎不起作用。你能给我一个在jsfiddle页面上工作的代码的例子吗？

Answer 1

好的，看看你遇到jQuery.bPopup.js问题的情况，所以这里有一个基本的例子，希望能指出你正确的方向。

<强> HTML：

<button class="trailerbutton" data-trailerid="whatever">Pop Trailer</button>
<div class="hiddenTrailer" id="whatever">
    <iframe width="560" height="315" src="//www.youtube.com/embed/jGGIgcFgnOk?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

<div id="my-popup">
    <div class="content"></div>
</div>

<强> JavaScript的：

$(function() {
    $('.trailerbutton').click(function(e) {

        e.preventDefault();
        var content = $('.content');
        var trailerid = $(this).data('trailerid');
        var trailerhtml = $('#' + trailerid).html();

        $('#my-popup').bPopup({
            onOpen: function() {
                content.html(trailerhtml || '');
            },
            onClose: function() {
                content.empty();
            }
        });
    });    
});

<强> CSS：

.hiddenTrailer {
    display: none;
}

#my-popup { 
    display:none;    
    background-color: #2B91AF;
    border-radius: 10px;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
    color: #FFF;
    cursor: pointer;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
}

在我的例子中，我选择通过一个公共类为trailerbutton的按钮来弹出预告片。这允许我对所有trailerbutton点击事件使用通用的JS代码。

我还选择将我的YouTube iframe隐藏在按钮下方的div中。请注意，这有一个hiddenTrailer类，它通过CSS隐藏。

如您所见，我存储了我要为data-trailerid属性中的每个按钮显示的预告片div的ID。

我还有一个名为my-popup的隐藏式“popup”占位符，它再次隐藏了CSS。

当用户单击该按钮时，将触发JS事件，并根据所有重要数据属性将正确的预告片加载到就绪和等待弹出窗口中的内容div中。

Here is a JSFiddle。请注意，我必须将整个jQuery.bPopup.min.js粘贴到JavaScript窗口中，因此请向下滚动以查看实际内容。

修改

如果您希望这适用于多个帖子，您可以执行以下操作：

<强> HTML：

<button class="trailerbutton">Pop Trailer</button> <div class="hiddenTrailer"> <iframe width="560" height="315" src="//www.youtube.com/embed/jGGIgcFgnOk?rel=0" frameborder="0" allowfullscreen></iframe> </div> <button class="trailerbutton">Pop Trailer</button> <div class="hiddenTrailer"> <iframe width="560" height="315" src="//www.youtube.com/embed/fZ_JOBCLF-I" frameborder="0" allowfullscreen></iframe> </div> <div id="my-popup"> <div class="content"></div> </div>

<强> JavaScript的：

$(function() { $('.trailerbutton').click(function(e) { e.preventDefault(); var content = $('.content'); var trailerhtml = $(this).next('.hiddenTrailer').html(); $('#my-popup').bPopup({ onOpen: function() { content.html(trailerhtml || ''); }, onClose: function() { content.empty(); } }); }); });

此处更新的行是var trailerhtml = $(this).next('.hiddenTrailer').html(); - 我现在使用jQuery选择下一个hiddenTrailer元素（即 - 您按下的按钮下面的元素）。

See this updated Fiddle.

弹出以显示带有datalife引擎标签的视频

1 个答案: