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

Question

我添加了在我网站的灯箱中显示 YouTube 视频的功能。但是，我发现有助于解决此问题的代码在 Lightbox 上没有关闭 (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 
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)
}

Answer 1

经过反复试验，我明白了这一点。

我将 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)

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

Adding a close function that doesn't reposition page

javascript

lightbox