Question

我正在使用3个图库。当您单击图像时，会出现一个带有iframe的弹出窗口。目前点击的3个不同图像都在弹出窗口中显示相同的视频。我想知道如何为不同的图像调用不同的视频。此外，是否可以自动启动视频，因此您不必在弹出窗口时按播放？谢谢大家，我的代码如下。

 <script>
 $(document).ready(function() {
    $('a.login-window').click(function() {

            //Getting the variable's value from a link 
    var loginBox = $(this).attr('href');

    //Fade in the Popup
    $(loginBox).fadeIn(300);

    //Set the center alignment padding + border see css style
    var popMargTop = ($(loginBox).height() + 24) / 2; 
    var popMargLeft = ($(loginBox).width() + 24) / 2; 

    $(loginBox).css({ 
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
    });

    // Add the mask to body
    $('body').append('<div id="mask"></div>');
    $('#mask').fadeIn(300);

    return false;
});

    // When clicking on the button close or the mask layer the popup closed
    $('a.close, #mask').live('click', function() { 
     $('#mask , .login-popup').fadeOut(300 , function() {
      $('#mask').remove();  
  }); 
 return false;
 });
});
</script>


      <div id="videos">
        <div id="header_start">
        <a class="login-window" href="#login-box"><img src="/images/video_holder1.jpg" style="padding-right: 20px; width: 316px; height: 186px;" /></a></div>
            <div class="login-popup" id="login-box">
                <iframe width="560" height="315" src="foo.com" frameborder="0" allowfullscreen></iframe>
                <a class="close" href="#"><img alt="Close" class="btn_close" src="close_pop.png" title="Close Window" /></a>
                </div></div>
      <div id="videos1">
        <div id="header_start">
        <a class="login-window" href="#login-box"><img src="/images/video_holder2.jpg" style="padding-right: 20px; width: 316px; height: 186px;" /></a></div>
            <div class="login-popup" id="login-box">
            <iframe width="560" height="315" src="foo.com" frameborder="0" allowfullscreen></iframe>
            <a class="close" href="#"><img alt="Close" class="btn_close" src="close_pop.png" title="Close Window" /></a>
            </div></div>
       <div id="videos2">     
         <div id="header_start">
         <a class="login-window" href="#login-box"><img src="/images/video_holder3.jpg" style="padding-right: 20px; width: 316px; height: 186px;" /></a></div>
            <div class="login-popup" id="login-box">
            <iframe width="560" height="315" src="foo.com" frameborder="0" allowfullscreen></iframe>
            <a class="close" href="#"><img alt="Close" class="btn_close" src="close_pop.png" title="Close Window" /></a>
            </div></div>

Answer 1

我创建了 FIDDLE

你的jQuery代码中有一些错误，我做了一些改动。当您点击图片时，您可以像这样访问正确的.login-popup：

var $loginBox = $(this).parent().next('.login-popup');

尝试获得“灵感”，并进行所需的修改，以获得您想要的内容。

您还要记住，ID在代码中应该是唯一的。如果要为多个元素提供相同的属性和样式，请使用类。

在弹出窗口中调用不同的Div

1 个答案: