изменение содержимого поля наложения изображений с помощью PHP (несколько изображений). Чистый CSS

Question

изменение содержимого поля наложения изображений с помощью PHP (несколько изображений). Чистый CSS

Я сделал простой JS FIDDLE с 2 кнопками.
Когда я нажимаю кнопку, в 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;
}

0

css overlay php

Решение

Другие решения

Вы можете сделать это с помощью jquery (обратите внимание, я изменил идентификатор, это должно быть уникальным):

var text_1 = 'Integer quis tortor ac erat ornare molestie. Vivamus tincidunt erat eros, vitae accumsan sem vehicula congue. Ut eu sem id urna cursus euismod non a justo. Vestibulum in dui sed arcu varius mollis. Donec eget nulla sed augue mattis congue. Mauris venenatis augue sit amet eleifend ultrices.';

var text_2 = 'Etiam quis hendrerit leo. Quisque feugiat euismod purus vel elementum. Vestibulum nec vulputate nunc. Vivamus vitae sollicitudin nisl, ut eleifend diam. Mauris quis ligula arcu.';

$(document).ready(function(){
$('#overlay p').html('')

$('#open-overlay_1').click(function(){
$('#overlay p').html(text_1)
})

$('#open-overlay_2').click(function(){
$('#overlay p').html(text_2)
})
})

ПРИМЕЧАНИЕ Это просто пример, чтобы объяснить, как это сделать. Для вашей галереи ваши данные должны быть загружены с помощью ajax-запроса и PHP.

https://jsfiddle.net/fyvmy0ea/

0

Источник

Accepted Answer

В этом случае вам нужно будет использовать 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;
}

0