php - 使用 PHP(多个图像)更改图像覆盖框内容。纯CSS

Question

我制作了一个带有 2 个按钮的简单 JS FIDDLE。 当我单击该按钮时，CSS 中会出现一个叠加层。

如何保持相同的覆盖样式，但根据单击的按钮有不同的内容覆盖？

我正在做一个图片库，图片(或本例中的按钮)的数量会有所不同。我想根据每个点击的图像(或按钮)打开不同的覆盖内容。

我该怎么做:

http://jsfiddle.net/mib92/twotc3m3/

HTML代码

    <a href="#overlay" id="open-overlay">Open Overlay 1</a><br>
    <a href="#overlay" id="open-overlay">Open Overlay 2</a>

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

        <!-- I want to change this content with php based on the different overlaybuttons -->
        <h2 style="font-size:35px">Pure CSS Overlay</h2>
        <p style="font-size:22px;">OPEN CONTENT OVERLAY 1</p>

    </div>
    <div id="mask" onclick="document.location='#';"></div> <!-- the only javascript -->

CSS 代码

#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;
    }
    #open-overlay{ /* 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;
    }

Answer 1

在这种情况下，您需要使用一些 AJAX，您可能希望有一个点击处理程序来向 PHP 文件提交请求，然后返回所需的内容。

有点像...

<a href="#" class="button" data-action="action1">Action 1</a>
<a href="#" class="button" data-action="action2">Action 2</a>

<div id="overlay">

</div>


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

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

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

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

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

然后在 PHP 中:

if (isset($_GET['action'])) {
    switch($_GET['action']) {
        'action1':
            $html = "Action 1";
            break;
        'action2':
            $html = "Action 2";
            break;
    }

    echo $html;
    exit;
}