javascript - 单击缩略图时 iFrame 弹出窗口

Question

我有这个脚本，它从 Twitch API 获取缩略图，单击缩略图会打开一个包含实际流的 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>