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

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

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

基本上，这会获取特定帖子“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> 

var self=$（this）//按钮
，content=$（'.content'）；
$（'element_to_pop_up'）.bPopup({
onOpen:function（）{
html（self.data（'bpopup'）| |'）；
},
onClose:function（）{
content.empty（）；
}
});

我用

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

[xfvalue\u在线]

---

我给出了一些随机css，只是为了定义类“element\u to\u pop\u”，但出于某种原因，这似乎不起作用。你能给我一个在JSFIDLE页面上工作的代码示例吗？

好的，从你遇到的问题来看，这里是一个基本示例，希望能为你指明正确的方向

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>

$(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();
            }
        });
    });    
});

.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;
}

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

$(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();
            }
        });
    });    
});

CSS:

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

$(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();
            }
        });
    });    
});

.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;
}

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

$(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();
            }
        });
    });    
});

在我的示例中，我选择通过一个按钮弹出拖车，该按钮的公共类为

trailerbutton

。这允许我对所有

trailerbutton

click事件使用公共JS代码

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

hiddenTrailer

如您所见，我将要为

data trailerid

属性中的每个按钮显示的拖车div的ID存储起来

我还有一个隐藏的“popup”占位符，名为

mypopup

，它同样是用CSS隐藏的

当用户单击该按钮时，会触发JS事件，并根据“所有重要数据”属性将正确的尾部加载到就绪和等待弹出窗口中的content div中

。请注意，我必须将整个jQuery.bPopup.min.js粘贴到JavaScript窗口中，因此向下滚动查看真正的内容

编辑：

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

$(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();
            }
        });
    });    
});

.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;
}

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

$(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();
            }
        });
    });    
});

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

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>

$(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();
            }
        });
    });    
});

.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;
}

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

$(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
元素（即您按下的按钮下方的元素）

您是否尝试过将
$（'element\u to\u pop\u'）
更改为
$（'.element\u to\u pop\u'）
？我现在做了。我基本上拥有的是包装在我为CSS样式定义的框中的预告片。我想我叫错了。。。这基本上就是我所拥有的。正如你所知，我不能在那里使用标记[xfvalue\u treyler]，所以我必须自己使用iframe代码。我遇到了一个问题，我不知道你是否能帮上忙。该按钮不会获取单个内容。。。我的意思是，如果1º柱，当我看到2º柱的预告片时，它将是相同的。。。但它应该是另一个one@PedroLino-查看我的更新-希望这会有所帮助。感谢您的耐心等待。我已经测试过了，但我认为这在Datalife引擎中不起作用。我们使用名为{content}的标记调用POST。这个标记检索帖子，并使用一个定义样式的.tpl文件（我想你可以称它为一篇帖子的默认html）。我正在编辑这个文件来输入预告片的代码。但我只能更改一个必须对所有对象都起作用的对象：/我已将div trailercainer放入其中，但它不起作用。还是一样的吗all@PedroLino-我现在简化了更新，这有帮助吗？确保更新JavaScript和模板。恐怕我对Datalife引擎没有任何经验，但希望这能推动您找到适合您的解决方案。太好了，五星：D谢谢！