Javascript 覆盖弹出框-获取内容

我在HTML页面中创建了覆盖内容，如下所示：

<!--OVERLAY POPUP-->
        <div class="overlay">
            <div class="content">
                <img class="logo" src="img/logo.jpg" alt="logo" />
                <h1>Title</h1>
                <p>The name of this sweet is: </p>
                <button class="closebtn">Close</button>
            </div>
        </div>

---

如何执行此操作？

在您的示例中，

$（“#供应商一号”）

不显示在覆盖上。覆盖作为代码是空的。您的覆盖图如何显示

$（“#供应商一号”）

？@AAmirAfridi否如果不显示，则对#供应商一号的引用是一个包含列表项的div。覆盖仅在包含“show popup”类的元素上执行。因此，您想将列表从vender one复制到覆盖，然后按照您所说的更新文本吗？像

$（'overlay'）.html（$（'vender one'））

，然后像你在问题中提到的那样更改文本？你想要这个：

$（'vendor one'）.append（'li class=“sweet“>）甜食的名称是：'+$（this）。查找（“name”）.text（）+'立即获取。）？@AamirAfridi否，我希望能够分别单击每个列表项并具有唯一的覆盖显示。用我在帖子中提到的文字。
<script type="text/javascript">
    $(document).ready(function(){
        $.ajax({
            type: "GET",
            url: "uploads/data.xml",
            dataType: "xml",
            error: function() {
                $('#message').text('Please upload the XML file.');
            },
            success: xmlParser
        });
    });

    function xmlParser(xml){
        $(xml).find("vendor-one").each(function(){
            $("#vendor-one").append('<li class="sweet">' + $(this).find("name").text() + '</li>');
            $(".sweet").fadeIn();
        });
/*
                Enable the overlay to display. Code used from:
                http://hallofhavoc.com/2013/05/how-to-create-an-overlay-popup-box-using-html-css-and-jquery/
            */
            $('.show-popup').click(function(event){
                event.preventDefault(); // disable normal link function so that it doesn't refresh the page
                var docHeight = $(document).height(); //grab the height of the page
                var scrollTop = $(window).scrollTop(); //grab the px value from the top of the page to where you're scrolling
                $('.overlay').show().css({'height' : docHeight}); //display your popup and set height to the page height
                $('.overlay').css({'top': scrollTop+20+'px'}); //set the content 20px from the window top
            });

            // hide popup when user clicks on close button
            $('.closebtn').click(function(){
                $('.overlay').hide(); // hide the overlay
            });

            // hides the popup if user clicks anywhere outside the container
            $('.overlay').click(function(){
                $('.overlay').hide();
            })

            // prevents the overlay from closing if user clicks inside the popup overlay
            $('.content').click(function(){
                return false;
            });
    }
</script>

'The name of the sweet is: ' + NAMEOFSWEET + ' Get it now.'