Javascript 在新窗口中将隐藏的div显示为内容

当您单击“查看产品演示”时，我正在尝试镜像的功能。它会弹出一个新窗口（不是新选项卡），其中禁用了滚动并定义了大小。重要的是，我的弹出窗口也有这个。对话框不起作用

我正在使用的视频是YouTube视频；我可以通过点击页面上的链接自己弹出视频。但是，我还需要能够在弹出窗口（图像+文本）中显示其他内容

我是jQuery新手，所以我不知道实现这一点的最佳方法。我的第一个想法是，我可以将所有内容都放在一个隐藏的div中，然后在单击某个元素时将该内容显示在一个新窗口中，并在单击jQuery时应用css使其正确显示

经过研究，我发现，这类作品。问题是它在一个新选项卡中打开，而不是在一个新窗口中，CSS在新选项卡中丢失（我可以用内联样式修复它，这并不理想，但我可以接受它）。如果我能让它成为一个新窗口而不是标签，我可以使用它。下面是：

<script type="text/javascript">
    function printClick() {
        var w = window.open();
        var html = $("#video-container").html();
        $(w.document.body).html(html);
    }

    $(function() {
        $("a#video-link").click(printClick);

    });
</script>

函数printClick（）{
var w=window.open（）；
var html=$（“#视频容器”）.html（）；
$（w.document.body）.html（html）；
}
$（函数（）{
$（“视频链接”）。单击（打印单击）；
});

然后：

<div id="product-description">
    <a href="#" id="video-link">
    <img src="cookware-product-demonstration-video.png" alt="View Product Demonstration Video" width="355" height="55" style="padding: 0px 0px 10px 0px;" border="0" />
    </a>
</div>
<div id="video-container" style="display: none;>
    <div id="video" style="width: 600px; position: relative; margin: 0px auto;">
        <div id="video-header">
            <img src="logo.gif" height="30" width="120" alt="Company Logo" style="float: left;"/>
            <p style="float: right">Product Demonstration Video</p>
        </div>
        <iframe width="600" height="338" src="http://www.youtube.com/embed/yeuCLMppZzc?rel=0"  frameborder="0" allowfullscreen></iframe>
    </div>
</div>

您可以使用查询字符串

使用函数from，在另一页上显示以下内容：

JAVASCRIPT:

function getParameterByName(name)
{
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.search);
  if(results == null)
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}

$(document).ready(function(){
    var width = 400,
    height = 300;

    //I've constructed it like this to prevent possible embedding errors

   var vid = 'http://www.youtube.com/v/' + getParameterByName("test");
   $('<object width="' + width + '" height="' + height + '">' +
   '<param name="movie" value="' + vid + '" />' +
   '<param name="allowFullScreen" value="true" />' +
   '<param name="allowscriptaccess" value="always" />' +
   '<param name="wmode" value="opaque">' +
   '<embed src="' + vid + '" type="application/x-shockwave-flash" width="' + width + '" height="' + height + '" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" /></object>')
   .appendTo($('#div1')); 
});

$(document).ready(function(){
    $("#b1").click(function(){
       var url = 'http://fiddle.jshell.net/dirtyd77/rmEvY/5/show/?test=yeuCLMppZzc';
       window.open(url, '_blank', "height=400,width=450");  //set height and width to make new window
    });
});

演示：

以下是最终产品的演示：

我可能会这样做，但这绝不是最好的方法。希望这就是你想要的。如果你有任何问题，请告诉我！祝你好运


编辑：

经过一些修补，我找到了一种在一页中完成这项工作的方法

试着这样做：

$(document).ready(function(){
    $("#b1").click(function(){
        var win = window.open('', '_blank', "height=400,width=450");
        var width = 400,
        height = 300,
        vid='http://www.youtube.com/v/yeuCLMppZzc';
        var obj = '<object width="' + width + '" height="' + height + '">' +
                            '<param name="movie" value="' + vid + '" />' +
                            '<param name="allowFullScreen" value="true" />' +
                            '<param name="allowscriptaccess" value="always" />' +
                            '<param name="wmode" value="opaque">' +
                            '<embed src="' + vid + '" type="application/x-shockwave-flash" width="' + width + '" height="' + height + '" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" /></object>';
        win.document.write(obj);
    });
});

$（文档）.ready（函数（）{
$（“#b1”）。单击（函数（）{
var win=窗口打开（“U空白”，“高度=400，宽度=450”）；
可变宽度=400，
高度=300，
维德http://www.youtube.com/v/yeuCLMppZzc';
var obj=''+
'' +
'' +
'' +
'' +
'';
win.document.write（obj）；
});
});

演示：

就我个人而言，我无法忍受弹出窗口。我觉得它们很烦人，尤其是当我打开多个窗口时。我的建议是使用并提供弹出窗口的错觉。如果你需要更多的信息，让我知道。我100%同意你的意见，我更愿意在对话或模式中这样做。我的任务是“尽可能接近这一点，以保持一致的网站体验”。。。但对话框或模式的顶部不会有浏览器栏：\我懂了。。。。嗯，好吧，我会回来给你一个答案！同情+1的严格要求。谢谢！功能正是我想要的，但是有没有可能在一个页面上而不是制作两个页面？我将这个div和video按钮插入产品列表页面上的Websphere（不确定您是否熟悉）。最好不要创建多个页面……我们的SEO人员真的不希望我们创建超出必要的URL。谢谢！但它仍然引用另一个URL…有没有一种方法可以在没有外部站点的情况下做到这一点？是的！这太完美了。谢谢你帮我解决这个问题…我甚至在你的代码中添加了我的徽标+文字。在职学习：）谢谢@当然是冲浪鸟！如果您需要任何其他帮助，请告诉我！快乐编码！