如果存在锚点，则自动打开弹出窗口答案

【问题标题】：Open Popup automatically if Anchor is present如果存在锚点，则自动打开弹出窗口
【发布时间】：2018-11-06 03:19:09
【问题描述】：

我有一个图片库。当页面第一次加载时，它使用 Ajax 来抓取一些图像，并且还有一个“加载更多”按钮。 This is working (Plunker)

但是，我的问题是，如果图像的 id 出现在 URL 中，我想自动加载并打开图像的弹出窗口，例如“http://localhost/test_json/new/#cd0”。

这是我使用的代码。

     $(document).ready(function(){
    // adding click event listener to the button
    $('#myButton1').on('click', function() {
        // make the AJAX request
        $.ajax({
            type:"GET",
            url:"data_hidden.xml",
            dataType:"xml",
            success:localHoliday
        });
    });    
});
   function localHoliday(xml){

    xml = $(xml).children();

    let i = 0;
    let total = $(xml).children().length;
    $("#rest_localHoliday").empty();
    $("#rest_localHoliday2").empty();
    $(xml).children().each(function (idx,index,item) {


        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>`;
        i++;


        if(i <= 3)    {
            $("#xmldata_hidden2").append(html);
            $("#xmldata_hiddenall").append(html);
        }
        else{            
            $("#xmldata_hidden").append(html);
        }

        $("#popup2").append(popup);
    });

    var hash = window.location.hash;
    if(hash != ""){
        $("a[href='"+hash+"']").find("h5").click();
    }
    $("a[id='openModalBtn']").click(function(){
        window.location.hash = $(this).attr("href");
    });
}

【问题讨论】：

活动分享弹窗url什么时候显示？
对不起，我试图理解你的问题，但我不明白问题是什么。请在第一段中扩展您的问题描述。什么是“隐藏部分缩略图”？你在哪里点击它？您要复制的哈希 URL 在哪里？它应该是什么样子？复制 URL 是什么意思 - 如何？我查看了您的 plunkr，但看不到您要描述的问题。请澄清。
是的，我也很模糊。
点击图片时，弹出窗口打开。它还显示一个类似“localhost/test_json/new/#cd0”的网址。我需要分享那个网址。使用该网址，需要直接打开弹出框。目前我可以分享第一部分弹出窗口的网址。但是，不能共享隐藏部分弹出窗口的网址。请检查 plunker 项目。对不起我的英语不好。
好像url里有#cd0，自动打开弹窗。

标签： javascript jquery ajax popup

【解决方案1】：

请使用此代码进行自动点击，希望它能解决您的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <title>XML Parse</title>
    <link rel="icon" type="image/x-icon" href="images/idss.ico" />  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Site CSS -->
    <link rel="stylesheet" href="style.css">


<script type="text/javascript">
      $(document).ready(function(){
    $.ajax({
        type:"GET",
        url:"data.xml",
        dataType:"xml",
        success:xmlParser2
    });
   });
   function xmlParser2(xml){
    xml = $(xml).children();
    let i = 0;
    let total = $(xml).children().length;
    $(xml).children().each(function (idx,index,item) {

        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 expireArray = $(this).attr('expires').split('/');
        const expireDate = `${expireArray[2]}${expireArray[1]}${expireArray[0]}`;
        const now = new Date(),
            nowDate = `${now.getFullYear()}${(now.getMonth()+1) <12 ? '0'+(now.getMonth()+1): (now.getMonth()+1)}${now.getDate()}`;

        if (nowDate > expireDate) {            
            return (idx + 1) ; 
        }

        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 reveal" id="random">
                    <div class="thumbnail randomdiv3">
                    <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>`;

i++;


        if(i <= 3)    {
            $("#xmldata").append(html);
            $("#xmldata_hiddenall").append(html);
        }
        else{            
            $("#xmldata2").append(html);
        }

        $("#popup").append(popup);
    });

function loadData(url, selector) {
            $.ajax({
                type: "GET",
                url: url,
                dataType: "xml"
            });
        }

if(!loadData("data_hidden.xml")){
            $('.next').on('click', function() {
            // make the AJAX request
            $.ajax({
                type:"GET",
                url:"data_hidden.xml",
                dataType:"xml",
                success:localHoliday
            });
        });
 }

    var hash = window.location.hash;
    if(hash != ""){
        $('#myButton1').click();
        $("a[href='"+hash+"']").find("h5").click();
    }
    $("a[id='openModalBtn']").click(function(){
        window.location.hash = $(this).attr("href");
    });


}
</script>

<!--**********End Local Holiday*************-->

<script type="text/javascript">
     $(document).ready(function(){
    // adding click event listener to the button
    $('#myButton1').on('click', function() {
        // make the AJAX request
        $.ajax({
            type:"GET",
            url:"data_hidden.xml",
            dataType:"xml",
            success:localHoliday
        });
    });    
});
   function localHoliday(xml){
   /* var items = $(xml).children().children();
    items.sort(function() { return 0.5 - Math.random() });*/

    xml = $(xml).children();

    let i = 0;
    let total = $(xml).children().length;
    $("#rest_localHoliday").empty();
    $("#rest_localHoliday2").empty();

    $(xml).children().each(function (idx,index,item) {

    let expireArray = $(this).attr('expires').split('/');
        const expireDate = `${expireArray[2]}${expireArray[1]}${expireArray[0]}`;
        const now = new Date(),
            nowDate = `${now.getFullYear()}${(now.getMonth()+1) <12 ? '0'+(now.getMonth()+1): (now.getMonth()+1)}${now.getDate()}`;

        if (nowDate > expireDate) {
            return;
        }

        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>`;
        i++;


        if(i <= 3)    {
            $("#xmldata_hidden2").append(html);
            $("#xmldata_hiddenall").append(html);
        }
        else{            
            $("#xmldata_hidden").append(html);
        }

        $("#popup2").append(popup);
    });

    var hash = window.location.hash;
    if(hash != ""){
        $("a[href='"+hash+"']").find("h5").click();
    }
    $("a[id='openModalBtn']").click(function(){
        window.location.hash = $(this).attr("href");
    });
}
</script>

</head>
<body>


        <div class="row" id="xmldata"></div>
        <div class="row" id="xmldata2" style="display: none;"></div>

        <section>
                <div class="container">
                    <input type="button" value="View All" id="myButton1" class="reveal" style="float: right;"  onclick="toggler('toggle_container');">

                        <div id="toggle_container" class='hide'>
                        <div class="block">
                          <div class="row" id="xmldata_hidden2" style="display: none;"></div>
                           <div class="row" id="xmldata_hidden"></div>

                        </div>
                </div>
             </div>
            </section>
            <div id="popup2"></div>
        <section id="popup"></section>


    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<script type="text/javascript">
            $('#myButton1').click(function () {
                                var self = this;
                                change(self);
                            });

                            function change(el) {
                                if (el.value === "View All")
                                    el.value = "Hide All";
                                else
                                    el.value = "View All";
                            }

                            function toggler(divId) {
                                $("#" + divId).toggleClass("hide");

                            }


                            function directLinkModal(hash) {
                                $(hash).modal('show');
                            }

        </script>

</body>
</html>

【讨论】：