使用PHP更改图像覆盖框内容（多个图像）。 PURE CSS

Question

I have made a simpe JS FIDDLE with 2 buttons. When I click the button, an overlay appears in CSS.

How can I keep the same overlay style, but have different content overlay based on which button is clicked?

I'm doing an image gallery, the number of images (or button in this example) will vary. I want to open different overlay content based on each clicked image (or button).

How can I do this:

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

HTML CODE

    <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 CODE

#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

You'll need to use some AJAX in that case, you would want to have a click handler that would submit a request to a PHP file that would then return the content required.

Something like...

<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>

And then in PHP:

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

    echo $html;
    exit;
}