Question

几个问题：

1）我试图让这个脚本更有效地运行。

2）当用户点击任一弹出按钮时，它会打开一个窗口并隐藏该元素。（目前我正在使用.detach（）删除嵌入式视频播放器，因为在Firefox .toggle（）中只隐藏播放器但保持音频播放。有更好的方法吗？

3）理论上，再次单击按钮或手动关闭窗口，它应该取消隐藏或.toggle（）元素，但由于detach（）而不能用于视频播放器。

4）如果用户弹出窗口，手动关闭它，然后再将其弹出，再次关闭它，元素不会.toggle（）返回。

在此处查看此行动，http://www.mst3k.tv/。

$(document).ready(function() {
  $('#lights').click(function(){$('#darkness').fadeToggle(500);});
  $("#lights").toggle(function(){$("#lights").attr('id','lightsoff');},function(){$("#lightsoff").attr('id','lights');});
  /**VIDEO**/
  var videoWin;
  $('#video-toggle').click(function(){
      $('#video').fadeToggle(500);
      $('#video').detach();
      });
  $('#video-toggle').click(function(){
      if (videoWin && !videoWin.closed) {
        videoWin.close();
        return false;
      }
      videoWin = window.open(
        $(this).attr('rel'),
        'videoWin',
        'width=600,height=480,toolbar=0,top=0,left=0,menubar=0,location=0,status=0,scrollbars=0,resizable=1');
      return false;
      }
    );
  var watchVideo = setInterval(function() {
      if (videoWin.closed) {clearTimeout(watchVideo);$('#video').show(500)}
      return false;
   }, 1);
  /**CHAT**/
  var chatWin;
  $('#chat-toggle').click(function(){
      $('#chat').fadeToggle(500);
      /*$('#chat').detach();*/
      });
  $('#chat-toggle').click(function(){
      if (chatWin && !chatWin.closed) {
        chatWin.close();
        return false;
      }
      chatWin = window.open(
        $(this).attr('rel'),
        'chatWin',
        'width=320,height=480,toolbar=0,top=0,left=601,menubar=0,location=0,status=0,scrollbars=0,resizable=1');
      return false;
      }
    );
  var watchChat = setInterval(function() {
      if (chatWin.closed) {clearTimeout(watchChat);$('#chat').show(500)}
      return false;
   }, 1);
  /*$("a.btn").fitText(1.2, { minFontSize: "6px", maxFontSize: "14px" });*/
});

Answer 1

如果您为代码创建了一个jQuery插件，那么您可以重新使用它并避免DRY。以下是几个选项：

插件1：jQuery popupWindow

插件2：jQuery winPop

另请注意，closed属性不是任何W3C规范的一部分，但浏览器可能会支持它。

Answer 2

您还可以编写可以重用的JS函数。根据{{3}}，大多数主流浏览器都支持 window.closed 属性，您可以在触发事件之前检查它。

而不是

if(videoWin && !videoWin.closed)

你可以使用

if (typeof videoWin!='undefined'){ /* it has been created */}
elseif(typeof videoWin='undefined') { /*it's okay to open the new window*/}

如果您使用此变量作为检查，请确保您没有创建变量，直到窗口打开事件被触发为止。由于您在函数声明之上创建了几行，因此它将始终按照定义返回。

您需要在函数中指定一个目标对象，以使其正确抛出多个窗口...这意味着您无法为多个窗口声明一个var。也许一堂课会更好。

我认为早些时候有点奇怪，但在FB过早发布我的回复之前忘记提及的是你在 rel 属性中添加 href 并指定href为一个js：void（0）也是非标准的。 rel属性用于指定链接和页面之间的关系...（例如，rel = nofollow）。这也可能就是为什么它不会在某些时候触发和失火，以及浏览器响应之间的差异。

高级jQuery弹出窗口

2 个答案: