Question

我找到了将xml数据加载到弹出框的代码。我试图共享弹出框的URL。但是该代码不支持共享URL。尝试在新选项卡中打开弹出窗口的URL时，需要直接显示弹出窗口。如何实现代码？

这是我找到的代码。

      $(document).ready(function(){
    $.ajax({
        type:"GET",
        url:"data.xml",
        dataType:"xml",
        success:xmlParser
    });
});

function xmlParser(xml){
    xml = $(xml).children();
    let total = $(xml).children().length;
    $(xml).children().each(function (idx) {     
        
        let tag = $(this).prop("tagName");
        let nextIdx = idx + 1;
        let prevIdx = idx - 1;
        //to make cyclic
        nextIdx = nextIdx == total ? 0 : nextIdx;
        prevIdx = prevIdx == -1 ? (total -1) : prevIdx;

        let image = '<img style="background-image:url(' + $(this).find("image").text() + ')"' + '" />';
        let image2 = '<div><img src="' + $(this).find("image").text() + '" width="100%" alt="' + '" />' + '</div>';
        let head = '<div>' + $(this).find("head").text() + '</div>';
        
        
        let html = `<div class="col-sm-4 random" id="random">
                    <div class="thumbnail randomdiv3" id="border" >
                    <a href="#${tag + idx}" id="openModalBtn">
                            <div>${image}</div>
                            <h5>${head}</h5>
                        </a>
                    </div>
                 </div>`;
        let popup = `<div id="${tag + idx}" class="overlay">
                <div class="popup">
                
                <a href="#${tag + prevIdx}" class="previous round">&#8249;</a>
                <a href="#${tag + nextIdx}" class="next round">&#8250;</a>
                    <h6>${head}</h6>
                    <a class="close" href="#">&times;</a>
                    <div>${image2}</div>
                </div>
            </div>`;


        $("#xmldata").append(html);
        $("#popup").append(popup);
    });
}

.overlay {
              position: fixed;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              background: rgba(0, 0, 0, 0.7);
              transition: opacity 500ms;
              visibility: hidden;
              opacity: 0;
            }
            .overlay:target {
              visibility: visible;
              opacity: 1;
            }
            .popup {
              margin: 70px auto;
              padding: 20px;
              background: #fff;
              border-radius: 5px;
              width: 30%;
              position: relative;
              transition: all 2s ease-in-out;
            }
            .popup .close {
              position: absolute;
              top: 20px;
              right: 30px;
              transition: all 200ms;
              font-size: 30px;
              font-weight: bold;
              text-decoration: none;
              color: #333;
            }
            .popup .content {
              max-height: 30%;
              overflow: auto;
            }
            .thumbnail img {
            width: 100%;
            height: 272px;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 50% 20%;
            vertical-align: middle;
            position: inherit;
            }

            .previous {
            background-color: #000;
            color: white;
            padding: 8px 16px;
            }

            .next {
                background-color: #000;
                color: white;
                padding: 8px 16px;
            }

            .round {
                border-radius: 50%;
            }

<div class="row" id="xmldata"></div>

<div id="popup"></div>

http://next.plnkr.co/edit/70HUWx64QlKhfMIh?open=lib%2Fscript.js

Answer 1

您可以使用url哈希共享弹出窗口

我已经更新了您的code一点，请检查并告知我，每次您单击链接打开弹出窗口时，它将更新您的窗口哈希，您可以将该URL共享给任何将直接打开图像的人弹出

如何分享弹出网址？

1 个答案: