Javascript 在弹出窗口中调用不同的div

我正在使用一个3图像库。单击图像时，会出现一个弹出窗口，其中包含一个iframe。当前，单击时的3个不同图像都会在弹出窗口中显示相同的视频。我想知道如何为不同的图像调用不同的视频。此外，是否可以自动启动视频，以便在弹出窗口出现时不必按play键？谢谢你们，我的代码如下

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

$（文档）.ready（函数（）{
$（'a.login-window'）。单击（函数（）{
//从链接获取变量的值
var loginBox=$（this.attr（'href'）；
//在弹出窗口中淡入淡出
$（登录框）.fadeIn（300）；
//设置中心对齐填充+边框请参见css样式
var popMargTop=（$（loginBox）.height（）+24）/2；
var popMargLeft=（$（loginBox）.width（）+24）/2；
$（登录框）.css（{
“页边距顶部”：-popMargTop，
“左边距”：-popMargLeft
});
//将遮罩添加到主体
$（'body'）。追加（''）；
$（'面具'）.fadeIn（300）；
返回false；
});
//单击“关闭”按钮或遮罩层时，弹出窗口关闭
$（'a.close，#mask'）.live（'click'，function（）{
$（'#掩码，.login popup'）.fadeOut（300，函数（）{
$（“#掩码”）.remove（）；
}); 
返回false；
});
});

我创建了一个

您的jQuery代码中有一些错误，我做了一些更改。单击图像时，您可以访问正确的

。登录弹出窗口

，如下所示：

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

试着获得“灵感”，并进行必要的修改，以得到你想要的

---

记住ID在代码中应该是唯一的，这一点也很重要。如果要为多个元素赋予相同的属性和样式，请使用类。

您有3个id相同的div（登录框），因此当您执行

$（loginBox）.fadeIn（）时，这将对所有3个div产生影响。感谢您的快速响应。当我更改每个视频上的id=“login box”时，弹出窗口中不会出现任何内容。我不知道如何在不为每个脚本重写新脚本的情况下调用脚本中的不同id。请尝试以下操作：
$（this）.next（“#登录框”）.fadeIn（300）用于fadeIn。不确定我做错了什么，但我现在仍然没有在弹出窗口中获得任何信息。我将id更改为以下id=“1loggin box”，id=“2login box，id=“3login box”。我在脚本中使用了您上面提到的代码。任何其他指针都将不胜感激。如果您更改了id，它将不再工作。请保持id不同（始终），然后尝试以下操作：
$（this）。下一步（'.login popup'）。fadeIn（300）
谢谢你，Dim13i！小提琴非常棒，我可以根据自己的需要定制一点。我真的很感激！我还有一个问题要问你。是否可以取消这个动作（视频播放）当弹出窗口关闭时。这将非常好，这样当其他人试图观看视频时，视频不会继续播放。您将包括什么类型的视频？（Youtube等）每个视频都有一个单独的Youtube视频。好的，我没有做任何特别的事情，但是你可以在这里尝试：。视频会自动启动，当你单击关闭图标时，视频会随着淡出而停止。