时间戳

首页 > 解决方案 > 添加不重新定位页面的关闭功能

javascript - 添加不重新定位页面的关闭功能

问题描述

我添加了在我的网站上的灯箱中显示 youtube 视频的功能。但是，我发现有助于解决此问题的代码在灯箱上没有关闭 (X)。虽然只需单击面具上的任意位置即可关闭它，但我认为并非所有网络用户都会意识到这一点，所以我添加了一个简单的

<a href="#" class="x">x</a>

到灯箱 div 上。虽然这确实在灯箱上提供了功能性关闭 (X)，但它具有当灯箱关闭时页面回到顶部的不良影响。

我最理想的是让 Lightbox 简单地关闭，并且页面保持在它打开时的相同位置，如果我只是单击蒙版就会发生这种情况。

我可以看到有一个部分注释为“//单击时隐藏灯箱”，但我不知道如何使 (X) 也触发相同的操作。

这是使用的完整脚本。

<div id="youtubelightbox" class="parent"><a href="#" class="x">x</a>
  <div class="centeredchild">
    <div class="videowrapper">
      <div id="playerdiv"></div>
    </div>
  </div>
</div>

<script>
// load Youtube API code asynchronously
var tag = document.createElement('script')
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0]
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag)

var isiOS = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)/i) != null //boolean check for iOS devices

var youtubelightbox = document.getElementById('youtubelightbox')
var player // variable to hold new YT.Player() instance

// Hide lightbox when clicked on
youtubelightbox.addEventListener('click', function(){
  this.style.display = 'none'
  player.stopVideo()
}, false)


// Exclude youtube iframe from above action
youtubelightbox.querySelector('.centeredchild').addEventListener('click', function(e){
e.stopPropagation()
}, false)


// define onYouTubeIframeAPIReady() function and initialize lightbox when API is ready
function onYouTubeIframeAPIReady() {
    createlightbox()
}

// Extracts the Youtube video ID from a well formed Youtube URL
function getyoutubeid(link){
// Assumed Youtube URL formats
// https://www.youtube.com/watch?v=Pe0jFDPHkzo
// https://youtu.be/Pe0jFDPHkzo
// https://www.youtube.com/v/Pe0jFDPHkzo
// and more

//See http://stackoverflow.com/a/6904504/4360074
var youtubeidreg = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/i;
return youtubeidreg.exec(link)[1] // return Youtube video ID portion of link
}

// Creates a new YT.Player() instance
function createyoutubeplayer(videourl){
    player = new YT.Player('playerdiv', {
        videoId: videourl,
        playerVars: {autoplay:1,
                     rel:0,
                     showinfo:0,
                     fs:0
                     }
    })
}

// Main Youtube lightbox function
function createlightbox(){
    var targetlinks = document.querySelectorAll('.lightbox')
    for (var i=0; i<targetlinks.length; i++){
        var link = targetlinks[i]
        link._videoid = getyoutubeid(link) // store youtube video ID portion of link inside _videoid property
        targetlinks[i].addEventListener('click', function(e){
            youtubelightbox.style.display = 'block'
            if (typeof player == 'undefined'){ // if video player hasn't been created yet
                createyoutubeplayer(this._videoid)
            }
            else{
                if (isiOS){ // iOS devices can only use the "cue" related methods
                    player.cueVideoById(this._videoid)
                }
                else{
                    player.loadVideoById(this._videoid)
                }
            }
            e.preventDefault()
        }, false)
    }
}


if (isiOS){ // iOS devices can only use the "cue" related methods
    player.cueVideoById(this._videoid)
}
else{
    player.loadVideoById(this._videoid)
}

标签： javascriptlightbox

解决方案

经过一些试验和错误，我发现了这一点。

我将html更改为

<div id="youtubelightbox" class="parent">
  <div class="centeredchild"><div id="x">x</div>
    <div class="videowrapper">
      <div id="playerdiv"></div>
    </div>
  </div>
</div>

并将以下内容添加到脚本中

x.addEventListener('click', function(){
  youtubelightbox.style.display = 'none'
  player.stopVideo()
}, false)

推荐阅读