Javascript Lightbox在不触发的情况下加载内容

我使用一个简单的灯箱，或者你可以称之为模态窗口。它不会加载任何flash内容，直到您单击“播放”按钮，当您单击“关闭”按钮时，它才会停止flash游戏（实际上，当您再次单击“播放”时，游戏会从头开始） 但这仅仅是关于FIREFOX的，而不是CHROME、IE或Safari中的行为，除了MOZILLA FIREFOX，所有浏览器的行为方式都完全不同，这与我上面描述的方式相反

在chrome浏览器中，即Safari Opera浏览器中，Flash内容开始加载时不会被触发（这意味着如果你不点击播放按钮，它仍会加载），即使你点击关闭按钮。flash游戏不再像firefox那样停止flash，而是继续运行（就像最小化而不是关闭）

为什么会发生这种情况，如何解决，我无法理解这种奇怪的行为

相关代码： CSS:

HTML:

');
//定义中心对齐的边距（垂直+水平）-我们将高度/宽度增加80，以适应css中定义的填充+边框宽度
var popMargTop=（$（'#'+popID）.height（）+0）/0；
var popMargLeft=（$（'#'+popID）.width（）+0）/0；
//将边距应用于弹出窗口
$（'#'+popID）.css（{
“页边距顶部”：-popMargTop，
“左边距”：-popMargLeft
});
//淡入背景
$（'body'）。追加（''）//将淡入淡出层添加到主体标记的底部。
$（'#fade'）.css（{'filter'：'alpha（不透明度=80）}）.fadeIn（）//淡入淡出层
返回false；
});
//关闭弹出窗口和淡入层
$（'a.close，#fade'）.live（'click'，function（）{//单击关闭或淡入淡出层时。。。
$（'#淡入，.popup#u块'）。淡出（函数（）{
$（“#淡入，a.close”）.remove（）；
})；//把它们都淡出
返回false；
});
});

---

这是一个实时演示页面

添加

显示：无

到包含flash的

iframe

中似乎不会阻止flash在后台播放，因此您可以将其从页面中删除，并将其存储在一个变量中，以便根据需要添加。看起来您将拥有多个灯箱，以便将它们存储在一个对象中

因此，在页面加载时：

var popups = {};
$("a.poplight").each(function(){
  var $that = $("#" + $(this).attr('rel'));
  popups[$that.attr("id")] = $that.html(); //store the object in an object for later
  $that.html(""); //only empty it, don't remove it, so we can use it late
});

然后在您的

$（'a.poplight[href^=#]'）中。单击
call，然后将弹出窗口淡入：

$('#' + popID).html(popups['#' + popID]);

希望能奏效，我已经够清楚了

实施

var弹出窗口={}；
$（文档）.ready（函数（）{
$（“a.poplight”）。每个（函数（）{
var$that=$（“#”+$（this.attr（'rel'））；
弹出窗口[$that.attr（“id”）]=$that.html（）；//将对象存储在对象中以备以后使用
$that.html（“”；//只清空它，不要删除它，这样我们可以晚一点使用它
});
//当您单击poplight类的链接时，href以a#开头
$（'a.poplight[href^=#]'）。单击（函数（）{
var popID=$（this.attr（'rel'）；//获取弹出窗口名称
var popURL=$（this.attr（'href'）；//获取Popup href以定义大小
//从href URL提取查询和变量
var query=popURL.split（“？”）；
var dim=query[1]。拆分（'&；'）；
var popWidth=dim[0]。拆分（'='）[1]；//获取第一个查询字符串值
//把html放回原处
$（'#'+popID）.html（弹出窗口['#'+popID]）；
//淡入弹出窗口并添加关闭按钮
$（'#'+popID）.fadeIn（）.css（{'width'：Number（popWidth）}）.prepend（''）；
//定义中心对齐的边距（垂直+水平）-我们将高度/宽度增加80，以适应css中定义的填充+边框宽度
var popMargTop=（$（'#'+popID）.height（）+0）/0；
var popMargLeft=（$（'#'+popID）.width（）+0）/0；
//将边距应用于弹出窗口
$（'#'+popID）.css（{
“页边距顶部”：-popMargTop，
“左边距”：-popMargLeft
});
//淡入背景
$（'body'）.append（“”）；//将淡入淡出层添加到body标记的底部。
$（#fade'）.css（{'filter'：'alpha（不透明度=80）}）.fadeIn（）；//淡入淡入淡入层
返回false；
});
//关闭弹出窗口和淡入层
$（'a.close，#fade'）.live（'click'，function（）{//单击关闭或淡入淡出层时。。。
$（'#淡入，.popup#u块'）。淡出（函数（）{
$（“#淡入，a.close”）.remove（）；
})；//把它们都淡出
返回false；
});
});
请正确设置代码格式。这让我做噩梦。有些警告说你要通过我的扬声器播放音乐，这也会很糟糕nice@RoryMcCrossan我希望现在是好的read@JoshDavenport对不起，但是你可以看到，这就是我在这里的原因。^^这里没有人足够聪明来帮助你。让我使用它，我会立即告诉你它是否解决了问题。^^天哪，当我添加你的实现脚本并删除我以前的脚本时，它使播放按钮消失了，现在我们没有播放按钮，所以没有人会取笑我们^^@CryOfFaclon选择器
$（“.poplight”）。这里的每个（function（）{
都需要引用您在
单击事件中显示的元素。不完全确定这是什么，您自然会比我更了解从
rel
属性编辑以复制您的ID检索
<script type="text/javascript">
$(document).ready(function(){

    //When you click on a link with class of poplight and the href starts with a # 
    $('a.poplight[href^=#]').click(function() {
        var popID = $(this).attr('rel'); //Get Popup Name
        var popURL = $(this).attr('href'); //Get Popup href to define size

        //Pull Query &amp; Variables from href URL
        var query= popURL.split('?');
        var dim= query[1].split('&amp;');
        var popWidth = dim[0].split('=')[1]; //Gets the first query string value

        //Fade in the Popup and add close button
        $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href=";#"; title=";Close It"; class=";close";><img src=";http://files.cryoffalcon.com/bloghuts/images/close%20button.png"; alt=";Close"; width=";20"; height=";20"; /></a>');

        //Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
        var popMargTop = ($('#' + popID).height() + 0) / 0;
        var popMargLeft = ($('#' + popID).width() + 0) / 0;

        //Apply Margin to Popup
        $('#' + popID).css({ 
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
        });

        //Fade in Background
        $('body').append('<div id=";fade";></div>'); //Add the fade layer to bottom of the body tag.
        $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 

        return false;
    });


    //Close Popups and Fade Layer
    $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
        $('#fade , .popup_block').fadeOut(function() {
            $('#fade, a.close').remove();  
    }); //fade them both out

        return false;
    });


});

</script>

var popups = {};
$("a.poplight").each(function(){
  var $that = $("#" + $(this).attr('rel'));
  popups[$that.attr("id")] = $that.html(); //store the object in an object for later
  $that.html(""); //only empty it, don't remove it, so we can use it late
});

$('#' + popID).html(popups['#' + popID]);

<script type="text/javascript">
var popups = {};
$(document).ready(function(){
    $("a.poplight").each(function(){
       var $that = $("#" + $(this).attr('rel'));
       popups[$that.attr("id")] = $that.html(); //store the object in an object for later
       $that.html(""); //only empty it, don't remove it, so we can use it late
    });
    //When you click on a link with class of poplight and the href starts with a # 
    $('a.poplight[href^=#]').click(function() {
        var popID = $(this).attr('rel'); //Get Popup Name
        var popURL = $(this).attr('href'); //Get Popup href to define size

        //Pull Query &amp; Variables from href URL
        var query= popURL.split('?');
        var dim= query[1].split('&amp;');
        var popWidth = dim[0].split('=')[1]; //Gets the first query string value

        //Put the html back in
        $('#' + popID).html(popups['#' + popID]);

        //Fade in the Popup and add close button
        $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href=";#"; title=";Close It"; class=";close";><img src=";http://files.cryoffalcon.com/bloghuts/images/close%20button.png"; alt=";Close"; width=";20"; height=";20"; /></a>');

        //Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
        var popMargTop = ($('#' + popID).height() + 0) / 0;
        var popMargLeft = ($('#' + popID).width() + 0) / 0;

        //Apply Margin to Popup
        $('#' + popID).css({ 
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
        });

        //Fade in Background
        $('body').append('<div id=";fade";></div>'); //Add the fade layer to bottom of the body tag.
        $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 

        return false;
    });


    //Close Popups and Fade Layer
    $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
        $('#fade , .popup_block').fadeOut(function() {
            $('#fade, a.close').remove();  
    }); //fade them both out

        return false;
    });


});

</script>