javascript - 从ajax中提取数据以更改覆盖层上的div

Question

谁能帮我理解我的代码出了什么问题。

我有 3 个链接，每个链接都有一个数据操作和一个 ID 号。

当我点击时，没有任何反应。它没有从我的 ajax (action.php) 中提取数据

HTML 代码:

<style>
#overlay{ /* we set all of the properties for are overlay */
    height:80%;
    width:80%;
    margin:0 auto;
    background:white;
    color:black;
    padding:10px;
    position:absolute;
    top:5%;
    left:10%;
    z-index:1000;
    display:none;
    /* CSS 3 */
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

#mask{ /* create are mask */
    position:fixed;
    top:0;
    left:0;
    background:rgba(0,0,0,0.6);
    z-index:500;
    width:100%;
    height:100%;
    display:none;

}
/* use :target to look for a link to the overlay then we find are mask */
#overlay:target, #overlay:target + #mask{
    display:block;
    opacity:1;
}
.close{ /* to make a nice looking pure CSS3 close button */
    display:block;
    position:absolute;
    top:-20px;
    right:-20px;
    background:red;
    color:white;
    height:40px;
    width:40px;
    line-height:40px;
    font-size:35px;
    text-decoration:none;
    text-align:center;
    font-weight:bold;
    -webkit-border-radius:40px;
    -moz-border-radius:40px;
    -o-border-radius:40px;
    border-radius:40px;
}

.button{ /* open the overlay */
    padding:10px 5px;
    background:blue;
    color:white;
    text-decoration:none;
    display:inline-block;
    margin:20px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

#overlay-content { 
    color:red;
}
</style>


<a href="#" class="button" data-action="1">link 1</a>
<a href="#" class="button" data-action="2">link 2</a>
<a href="#" class="button" data-action="3">link 3</a>

<div id="overlay">
    <a href="#" class="close">&times;</a>
    <div id="overlay-content"></div>
</div>

<div id="mask" onclick="document.location='#';"></div>


<script type="text/javascript">
    $(".button").click(function(e) {
        e.preventDefault();

        $.ajax(function(){
            url: "action.php",
            method: "get",
            data: {
                id: $(this).attr("data-action")
            }, 
            success: openOverlay(data)
        })
    });

    function openOverlay(html_content)
    {
        // Clear out the overlay-content
        $("#overlay-content").html("");

        // Add new stuff in
        $("#overlay-content").html(html_content);

        $("#overlay").css("display:block; opacity:1;");
        $("#mask").css("display:block; opacity:1;");
    }
</script>

这里是 Action.PHP

if (isset($_GET['id'])) 
{
    $id = $_GET['id'];  

    $html = "This is a TEST...  ID = ".$id;

    echo $html;
    exit;
}

Answer 1

你的脚本应该是这样的

$(".button").click(function(e) {
            e.preventDefault();
            $.ajax({
                    url: "action.php",
                    method: "get",
                    data: {
                    id: $(this).attr("data-action")
                    },
                    success: openOverlay

            });
        });
            function openOverlay(html_content)
            {
            // Clear out the overlay-content
            $("#overlay-content").html("");
            // Add new stuff in
            $("#overlay-content").html(html_content);
            function openOverlay(html_content)
        {
            alert(html_content);
        // Clear out the overlay-content
        $("#overlay-content").html("");
        // Add new stuff in
        $("#overlay-content").html(html_content);
        $("#overlay").css("display", 'block').css("opacity", '1');
        $("#mask").css("display", 'block').css("opacity", '1');
        }
            }

用于紧密叠加

$('.close').on('click', function(e){
               $("#overlay").css("display", 'none').css("opacity", '0');
            $("#mask").css("display", 'none').css("opacity", '0'); 

            });