iFrame Popup auf Thumbnail klicken

Question

Ich habe dieses Skript, das Thumbnails von der Twitch API holt, und beim Klick auf das Thumbnail öffnet es einen iFrame mit dem eigentlichen Stream. Wie kann ich das iFrame Popup in der Mitte des Bildschirms machen und alles andere wird dunkler?

$('.games > div').click((e) => { 
    var gameDiv = $(this); 
    $('#twitch').children().fadeOut(500).promise().then(function() { 
     $('#twitch').empty(); 

      var gameName = $(e.target).text().replace(' ', '%20'); 
      console.log(gameName); 
      var twitchApi = "https://api.twitch.tv/kraken/streams?game=" +gameName; 
      $.getJSON(twitchApi, function(json) { 
       setData(json.streams) 
     }); 

     function setData(twitchData) { 
      var i = 0; 
      var j = twitchData.length > (i + 9) ? (i + 9) : twitchData.length; for 
       (; i < j; i++) { 
       var streamGame = twitchData[i].game; 
       var streamThumb = twitchData[i].preview.medium; 
       var streamVideo = twitchData[i].channel.name; 
       var img = $('<img style="width: 250px; height: 250px;" src="' + streamThumb + '"/>'); 
       $('#twitch').append(img); 
       img.click(function() { 
        $('#twitch iframe').remove() 
        $('#twitchframe').append('<iframe frameborder= src="http://player.twitch.tv/?channel=' + streamVideo + '"></iframe>'); 
       }); 
      } 
     } 
      $('#load').click(function() { 
     setData(); 
    }); 
      }); 

}); 

Answer 1

Dieser Code funktioniert für mich

<div class="overlay"> 
    <iframe src="iframe-src-url"></iframe> 
</div> 
<style> 
    .overlay { 
     position: fixed; 
     top: 0; 
     left: 0; 
     width: 100%; 
     height: 100%; 
     background: rgba(0, 0, 0, 0.74); /* semi-transparent background */ 
     text-align: center; 
     display: none; /* hide this by default */ 
    } 

    .overlay iframe { 
     margin: 30px auto; 
    } 
</style> 

Javascript-Code

function setData(twitchData) { 
     var i = 0; 
     var j = twitchData.length > (i + 9) ? (i + 9) : twitchData.length; for 
      (; i < j; i++) { 
      var streamGame = twitchData[i].game; 
      var streamThumb = twitchData[i].preview.medium; 
      var streamVideo = twitchData[i].channel.name; 
      var img = $('<img style="width: 250px; height: 250px;" src="' + streamThumb + '"/>'); 
      $('#twitch').append(img); 
      img.click(function() { 
       $('#twitch iframe').remove() 

       // append it to the overlay then show 
       $('.overlay').append('<iframe frameborder= src="http://player.twitch.tv/?channel=' + streamVideo + '"></iframe>').show(); 
      }); 
     } 
    } 

Hoffnung das funktioniert für Sie

$('h1').click(function() { 
 
    $('.overlay').append('<iframe src="iframe-src-url"></iframe>').show(); 
 
});

.overlay { 
 
     position: fixed; 
 
     top: 0; 
 
     left: 0; 
 
     width: 100%; 
 
     height: 100%; 
 
     background: rgba(0, 0, 0, 0.74); /* semi-transparent background */ 
 
     text-align: center; 
 
     display: none; /* hide the overlay by default */ 
 
    } 
 

 
    .overlay iframe { 
 
     margin: 30px auto; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>Sample text</h1> 
 
<div class="overlay"></div>