Вот моя полностью протестированная реализация извлечения строки и требуемая модальная функция из демонстрации w3schools:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
.triggersModal {
padding: 50px;
border: solid 2px black;
margin: 50px;
cursor: pointer;
}
/* The Modal (background) */
#myModal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
#modalCloser {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
#modalCloser:hover,
#modalCloser:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<?php
$episodes = [
[
'episode_title' => 'Lorem Ipsum',
'description' => "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."],
[
'episode_title' => "The standard 'Lorem Ipsum' passage, used since the 1500s",
'description' => '"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."'
]
];
foreach ($episodes as $index => $episode) { ?>
<div class="triggersModal" data-index="<?php echo $index; ?>">
<div><?php
if (strlen($episode['episode_title']) <= 50) {
echo $episode['episode_title'];
} else {
echo substr($episode['episode_title'], 0, 50) , "(...)";
}
?></div>
<div><?php
if (strlen($episode['description']) <= 100) {
echo $episode['description'];
} else {
echo substr($episode['description'], 0, 100) , "(...)";
}
?></div>
</div>
<?php } ?>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="modalCloser">×</span>
<p id="modalFullTitle"></p>
<p id="modalFullDescription"></p>
</div>
</div>
<script>
// Transfer data from php to javascript
let episodes = <?php echo json_encode($episodes); ?>,
classname = document.getElementsByClassName("triggersModal"),
modal = document.getElementById("myModal");
// Bind value insertion and modal display to onclick event of every element with named class
for (let i = 0, len = classname.length; i < len; ++i) {
classname[i].onclick = function() {
let index = this.getAttribute('data-index');
document.getElementById("modalFullTitle").innerHTML = episodes[index]['episode_title'];
document.getElementById("modalFullDescription").innerHTML = episodes[index]['description'];
modal.style.display = "block";
}
}
// Close the modal
document.getElementById("modalCloser").onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
Вам нужно будет заменить мой жестко запрограммированный ввод (см. Выше) на ваши файлы. Чтобы создать ваш $episodes массив и отобразить содержимое основного слоя с помощью одного цикла, используйте его внутри тега <body>, где вы хотите отобразить интерактивные блоки чтения:
<?php
$episodes = [];
$index = 0;
foreach ($xml_files as $file) {
$xml = simplexml_load_file("{$src_dir}/{$file}");
if (!$xml) {
continue;
}
$episode_title = (string)$xml->xpath('//StringAssetInfo[attrName="CASE_EPISODE_TITLE"]/value');
$description = (string)$xml->xpath('//TextAssetInfo[attrName="CASE_DESCRIPTION_ENGLISH"]/value');
$episodes[] = ['episode_title' => $episode_title, 'description' => $description]; // used downscript to deliver data to clientside/js
?>
<div class="triggersModal" data-index="<?php echo $index; ?>">
<div>
<?php
if (strlen($episode_title) <= 50) {
echo $episode_title;
} else {
echo substr($episode_title, 0, 50) , "(...)";
}
?>
</div>
<div>
<?php
if (strlen($description) <= 100) {
echo $description;
} else {
echo substr($description, 0, 100) , "(...)";
}
?>
</div>
</div>
<?php
++$index;
}
?>
На что обратить внимание:
- Все события нажатия записываются в блоке сценария, а не в html, чтобы обеспечить чистоту и удобство чтения.
- Использование многоточия необходимо только в том случае, если длина строки достаточна, чтобы ее заслужить.
- Передайте данные из php в js с помощью
json_encode().
- Не использовать
die().
- Я предпочитаю не называть переменные (в php или js), которые будут использоваться только один раз. Есть некоторые исключения, но это моя философия по умолчанию.
- Поскольку массив поиска (
episodes) является индексированным массивом, единственное релевантное значение, которое нужно передать из элемента, по которому щелкнули, - это индекс. Атрибут data- поддерживает связь между основным дисплеем и данными, отображаемыми в модальном режиме.
- Использование тегов
<table> для отображения не табличного содержимого не рекомендуется. Я сделал очень мало, чтобы стилизовать страницу и модал. Я не хотел уходить слишком далеко от демонстрации, которую вы предоставили.
- Элементы HTML, которые должны быть идентифицированы, должны содержать
id для удобного расположения для JavaScript Элементы, которые встречаются в нескольких местах, должны содержать class.
- После тестирования моего скрипта, нет проблем с отображением цитируемого текста на главной странице или в модале.
- Я пытался сохранить синтаксис простым / читабельным, но я часто предпочитаю троичные операторы (встроенные условия) в моих php и js. Некоторые люди предпочитают сокращение
<?= и ?> при отображении php. Я тоже к этому хорош; выбирай что хочешь.
- И последнее, но не менее важное: если ваши входные строки поступают из небезопасных каналов или если они содержат html, это улучшило бы стабильность / безопасность вашего приложения для кодирования html-сущностей с использованием
htmlspecialchars($string, ENT_QUOTES, 'UTF-8') для любых строк, отображаемых на экране ( после подсчета длины строки, но до отображения ). Вот хорошая ссылка: https://stackoverflow.com/a/1996141/2943403
Вот мой исходный код, переданный в исполняемый фрагмент Stackoverflow:
// Transfer data from php to javascript
let lookup = [{"episode_title":"Lorem Ipsum","description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."},{"episode_title":"The standard 'Lorem Ipsum' passage, used since the 1500s","description":"\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\""}],
classname = document.getElementsByClassName("triggersModal"),
modal = document.getElementById("myModal");
// Bind value insertion and modal display to onclick event of every element with named class
for (let i = 0, len = classname.length; i < len; ++i) {
classname[i].onclick = function() {
let index = this.getAttribute('data-index');
document.getElementById("modalFullTitle").innerHTML = lookup[index]['episode_title'];
document.getElementById("modalFullDescription").innerHTML = lookup[index]['description'];
modal.style.display = "block";
}
}
// Close the modal
document.getElementById("modalCloser").onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
body {font-family: Arial, Helvetica, sans-serif;}
.triggersModal {
padding: 50px;
border: solid 2px black;
margin: 50px;
cursor: pointer;
}
/* The Modal (background) */
#myModal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
#modalCloser {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
#modalCloser:hover,
#modalCloser:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="triggersModal" data-index="0">
<div>Lorem Ipsum</div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the (...)</div>
</div>
<div class="triggersModal" data-index="1">
<div>The standard 'Lorem Ipsum' passage, used since the(...)</div>
<div>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore(...)</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="modalCloser">×</span>
<p id="modalFullTitle"></p>
<p id="modalFullDescription"></p>
</div>
</div>
</body>
</html>
Еще один исполняемый фрагмент кода, который был настроен для индивидуального представления текста ячейки ...
// Transfer data from php to javascript
let lookup = [{"episode_title":"Lorem Ipsum","description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."},{"episode_title":"The standard 'Lorem Ipsum' passage, used since the 1500s","description":"\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\""}],
classname = document.getElementsByClassName("triggersModal"),
modal = document.getElementById("myModal");
// Bind value insertion and modal display to onclick event of every element with named class
for (let i = 0, len = classname.length; i < len; ++i) {
classname[i].onclick = function() {
let index = this.getAttribute('data-index'),
content = this.getAttribute('data-content');
document.getElementById("modalText").innerHTML = lookup[index][content];
modal.style.display = "block";
}
}
// Close the modal
document.getElementById("modalCloser").onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
body {font-family: Arial, Helvetica, sans-serif;}
.box {
padding: 50px;
border: solid 2px black;
margin: 50px;
}
.triggersModal {
cursor: pointer;
}
/* The Modal (background) */
#myModal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
#modalCloser {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
#modalCloser:hover,
#modalCloser:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="box">
<div class="triggersModal" data-index="0" data-content="episode_title">Lorem Ipsum</div>
<div class="triggersModal" data-index="0" data-content="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the (...)</div>
</div>
<div class="box">
<div class="triggersModal" data-index="1" data-content="episode_title">The standard 'Lorem Ipsum' passage, used since the(...)</div>
<div class="triggersModal" data-index="1" data-content="description">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore(...)</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="modalCloser">×</span>
<p id="modalText"></p>
</div>
</div>
</body>
</html>
А вот дамп пастины php выполнения вышеупомянутого: https://pastebin.com/YnhNq6rD