0

我需要一些关于 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页面上工作的代码的例子吗？

4

1 回答 1

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，它再次被 CSS 隐藏。

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

这是一个 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元素（即 - 您按下的按钮下方的那个）。

请参阅此更新的小提琴。

于 2014-02-18T12:09:50.950 回答