Question

我正在创建一个烧瓶应用程序，它列出了HTML模板中数据库中的所有视频。单击链接时，视频开始在弹出窗口中播放，箭头按钮导航到下一个视频，关闭按钮关闭弹出窗口。

带有js代码的jinja2模板如下：

{% extends "base_nav2.html" %}
{% block content %}
    <div id="works">
    <div class="container">
    {% if results %}
        <center><h2>Results for Query: {{ query }}</h2></center>
        <div class="row text-center page" style="display:flex; flex-wrap:wrap;">
        {% for p in results %}
            <div class="col-md-3 col-sm-6">
                <div class="thumbnail" style="height: 162; width: 284">
                    <img src="{{ url_for('static', filename=p.thumb) }}">
                    <div class="caption">
                        <a href="#media-popup" data-media="{{ url_for('static', filename=p.path) }}">{{p.filename}}</a><br>
                    </div>
                </div>
            </div>
        {% endfor %}
        <div class="popup" id="media-popup">
            <a href="#media-close" id="media-prev" style="margin-top: -10;"><i class="fa fa-arrow-left fa-4x" style="margin-top: -10;"></i></a>
            <a href="#media-close" id="close" align="right"><i class="fa fa-window-close fa-4x" aria-hidden="true"></i></a>
            <a href="#media-close" id="media-next"><i class="fa fa-arrow-right fa-4x"></i></a>
        </div>
        </div>
    {% else %}
        <center><h2>No results found for Query: {{ query }}</h2></center>
    {% endif %}
    <div>
    </div>

    <script>
    var links = [];
    var current_entry = 0;
    var full_links = $("[data-media]");
    for (var key in full_links)
    {
        if(typeof full_links[key] === 'number')
            break;
        links.push(full_links[key].dataset.media);
    }
    var length = links.length;
    var next;
    var prev;

    $("[data-media]").on("click", function(e) {
        e.preventDefault();
        var $this = $(this);
        var videoUrl = $this.attr("data-media");
        var popup = $this.attr("href");
        $("#media-popup").append("<iframe id=\"vid\" width=\"560\" height=\"315\" src=\"\" frameborder=\"0\" allowfullscreen></iframe>");
        var $popupIframe = $(popup).find("iframe");

        $popupIframe.attr("src", videoUrl);
        current_entry= links.indexOf(videoUrl);
        if(current_entry == length-1)
        {
            next = 0;
            prev = current_entry - 1;
        }
        else if(current_entry == 0)
        {
            next = current_entry + 1;
            prev = length - 1;
        }
        else
        {
            next = current_entry + 1;
            prev = current_entry - 1;
        }

        $this.closest(".page").addClass("show-popup");
        window.scrollTo(0, 0);
    });

    $("#media-next").on("click", function(e){
        document.getElementById("vid").src = "http://localhost:5000" + links[next];
        current_entry = next;
        if(current_entry == length-1)
        {
            next = 0;
            prev = current_entry - 1;
        }
        else if(current_entry == 0)
        {
            next = current_entry + 1;
            prev = length - 1;
        }
        else
        {
            next = current_entry + 1;
            prev = current_entry - 1;
        }
    });

    $("#media-prev").on("click", function(e){
        document.getElementById("vid").src = "http://localhost:5000" + links[prev];
        current_entry = prev;
        if(current_entry == length-1)
        {
            next = 0;
            prev = current_entry - 1;
        }
        else if(current_entry == 0)
        {
            next = current_entry + 1;
            prev = length - 1;
        }
        else
        {
            next = current_entry + 1;
            prev = current_entry - 1;
        }
    });

    $("#close").on("click", function(e) {
        e.preventDefault();
        e.stopPropagation();
        $(".page").removeClass("show-popup");
        $("iframe").remove();
    });

    $(".popup > iframe").on("click", function(e) {
        e.stopPropagation();
        $(".page").removeClass("show-popup");
    });
    </script>
{% endblock %}

CSS ：

.page {
    position: relative;
    height:100%;
}

.popup {
    position:absolute;
    z-index:2;
    margin-top: 10;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    opacity:0;
    visibility:hidden;
    transition:.3s ease;
}

.show-popup .popup {
    opacity:1;
    visibility: visible;
}

This is how the video popup looks

我想在播放器两侧放置箭头按钮，在褪色区域的角落放置关闭按钮，但我没有成功这样做。这样做的推荐策略应该是什么？

Answer 1

你想要这样的东西吗？我只是在按钮上添加了位置值。

＆＃13;

.popup {
  position: absolute;
  z-index: 2;
  margin-top: 10;
  top: 0;
  left: 0;
  width: 400px;
  height: 400px;
  background: rgba(0, 0, 0, 0.7);
  transition: .3s ease;
}

#close {
  position: absolute;
  right: 0;
  top: 0;
}

#media-prev {
  position: absolute;
  left: 0;
  top: 35%;
}

#media-next {
  position: absolute;
  right: 0;
  top: 35%;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="popup" id="media-popup">
  <a href="#media-close" id="media-prev" style="margin-top: -10;"><i class="fa fa-arrow-left fa-4x" style="margin-top: -10;"></i></a>
  <a href="#media-close" id="close" align="right"><i class="fa fa-window-close fa-4x" aria-hidden="true"></i></a>
  <a href="#media-close" id="media-next"><i class="fa fa-arrow-right fa-4x"></i></a>
</div>

＆＃13;

有关弹出库的HTML / JS箭头放置的帮助

1 个答案: