iFrame popup on thumbnail click

Question

У меня есть этот скрипт, который извлекает эскизы из API Twitch, и при нажатии на миниатюру открывается iFrame с фактическим потоком. Как я могу сделать всплывающее окно iFrame посередине экрана, а все остальное становится темнее?

$('.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

Этот код работает для меня

<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 код

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(); 
      }); 
     } 
    } 

Надеется, что это работает для вас

$('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>