我试图将W3schools.com(https://www.w3schools.com/howto/howto_css_modals.asp)上找到的弹出式模式添加到每个<line>
。当用户点击任何<line>
时,相应的<title>
,整个<description>
和<footer>
都会弹出。我的xml看起来像这样:
<?xml version="1.0" encoding="UTF-8"?>
<items>
<item>
<title>Header1</title>
<description>
<p>
<line>
This is line 1 of description of item 1.
</line>
<line>
This is line 2 of description of item 1.
</line>
<line>
This is line 3 of description of item 1.
</line>
</p>
</description>
<footer>Footer1</footer>
</item>
<item>
<title>Header2</title>
<description>
<p>
<line>
This is line 1 of description of item 2.
</line>
<line>
This is line 2 of description of item 2.
</line>
<line>
This is line 3 of description of item 2.
</line>
</p>
</description>
<footer>Footer2</footer>
</item>
</items>
如果我在xsl中添加<div id="myModal" class="modal">
和<script>
,则xsl不会产生输出。
这是我的xsl:
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<xsl:apply-templates select="items/item/title"/>
<script>
function para() {
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var p = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
p.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.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>
</xsl:template>
<xsl:template match="title">
<p onclick="para()" id="myBtn">
<xsl:apply-templates/>
</p>
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>text in the Modal</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
</xsl:template>
</xsl:stylesheet>
这是PHP:
<!DOCTYPE html>
<html>
<head>
<style>
/* The Modal (background) */
.modal {
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 {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
</style>
</head>
<body>
<?php
$xml = new DOMDocument;
// Load XML file
$xml->load('test.xml');
// Load XSL file
$xsl = new DOMDocument;
$xsl->load('test.xsl');
// Configure the transformer
$xsltProcessor = new XSLTProcessor;
// Attach the xsl rules
$xsltProcessor->importStyleSheet($xsl);
echo $xsltProcessor->transformToXML($xml);
?>
</body>
</html>
答案 0 :(得分:1)
您使用的代码是单个模态对话,您需要扩展它以允许它与各种模态对话一起使用,这里有一个简单的Javascript / HTML / CSS组合:
var modals = {
currentModal : null,
openModal : function(id) {
this.currentModal = document.getElementById(id);
this.currentModal.style.display = 'block';
},
close : function() {
if (this.currentModal != null) {
this.currentModal.style.display = 'none';
this.currentModal = null;
}
}
}
// When the user clicks anywhere outside of a modal, close it
window.onclick = function(event) {
if (event.target == modals.currentModal) {
modals.close();
}
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
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/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<!-- Trigger/Open The Modal 1 -->
<button onclick="modals.openModal('modal1');">Open Modal 1</button>
<!-- The Modal 1 -->
<div id="modal1" class="modal">
<!-- Modal content 1-->
<div class="modal-content">
<span class="close" onclick="modals.close();">×</span>
<p>Some text in the Modal 1..</p>
</div>
</div>
<!-- Trigger/Open The Modal 2 -->
<button onclick="modals.openModal('modal2');">Open Modal 2</button>
<!-- The Modal 2 -->
<div id="modal2" class="modal">
<!-- Modal content 2-->
<div class="modal-content">
<span class="close" onclick="modals.close();">×</span>
<p>Some text in the Modal 2..</p>
</div>
</div>
现在您需要确保您的XSLT生成该结构,这是一个完整的样式表,可以执行此操作:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">
<xsl:output method="html" indent="yes" version="5.1" doctype-system="about:legacy-compat"/>
<xsl:template match="/">
<html>
<head>
<title>Test</title>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
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/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
<script>
var modals = {
currentModal : null,
openModal : function(id) {
this.currentModal = document.getElementById(id);
this.currentModal.style.display = 'block';
},
close : function() {
if (this.currentModal != null) {
this.currentModal.style.display = 'none';
this.currentModal = null;
}
}
}
// When the user clicks anywhere outside of a modal, close it
window.onclick = function(event) {
if (event.target == modals.currentModal) {
modals.close();
}
}
</script>
</head>
<body>
<h1>Test</h1>
<xsl:apply-templates select="items/item"/>
<xsl:apply-templates select="items/item" mode="dialogue"/>
</body>
</html>
</xsl:template>
<xsl:template match="items/item">
<p onclick="modals.openModal('modal{position()}');">
<xsl:value-of select="title"/>
</p>
</xsl:template>
<xsl:template match="items/item" mode="dialogue">
<xsl:comment>The Modal <xsl:value-of select="position()"/></xsl:comment>
<div id="modal{position()}" class="modal">
<div class="modal-content">
<span class="close" onclick="modals.close();">×</span>
<section>
<xsl:apply-templates mode="dialogue"/>
</section>
</div>
</div>
</xsl:template>
<xsl:template match="items/item/title" mode="dialogue">
<h2>
<xsl:apply-templates mode="dialogue"/>
</h2>
</xsl:template>
<xsl:template match="items/item/description" mode="dialogue">
<p>
<xsl:apply-templates mode="dialogue"/>
</p>
</xsl:template>
<xsl:template match="items/item/footer" mode="dialogue">
<h3>
<xsl:apply-templates mode="dialogue"/>
</h3>
</xsl:template>
</xsl:stylesheet>
https://martin-honnen.github.io/xslt/2017/test2017091201.xml在线示例。由于您似乎想要使用PHP运行XSLT服务器端,并且只使用XSLT生成部分HTML,您显然需要对其进行调整。
至于你的改编输入XML样本,它甚至没有格式良好,所以你没有尝试过几个小时。您必须首先找到用HTML表示对话内容的方法,然后您可以简单地编写模板来创建该结构。这是一次尝试:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">
<xsl:output method="html" indent="yes" version="5.1" doctype-system="about:legacy-compat"/>
<xsl:template match="/">
<html>
<head>
<title>Test</title>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
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/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
<script>
var modals = {
currentModal : null,
openModal : function(id) {
this.currentModal = document.getElementById(id);
this.currentModal.style.display = 'block';
},
close : function() {
if (this.currentModal != null) {
this.currentModal.style.display = 'none';
this.currentModal = null;
}
}
}
// When the user clicks anywhere outside of a modal, close it
window.onclick = function(event) {
if (event.target == modals.currentModal) {
modals.close();
}
}
</script>
</head>
<body>
<h1>Test</h1>
<ul>
<xsl:apply-templates select="items/item"/>
</ul>
<xsl:apply-templates select="items/item//line" mode="dialogue"/>
</body>
</html>
</xsl:template>
<xsl:template match="items/item">
<li>
<xsl:value-of select="title"/>
<ul>
<xsl:apply-templates select=".//line"/>
</ul>
</li>
</xsl:template>
<xsl:template match="items/item//line">
<xsl:variable name="pos">
<xsl:number level="any"/>
</xsl:variable>
<li onclick="modals.openModal('modal{$pos}');">
<xsl:value-of select="."/>
</li>
</xsl:template>
<xsl:template match="items/item//line" mode="dialogue">
<xsl:comment>The Modal <xsl:value-of select="position()"/></xsl:comment>
<div id="modal{position()}" class="modal">
<div class="modal-content">
<span class="close" onclick="modals.close();">×</span>
<section>
<xsl:apply-templates select="ancestor::item" mode="dialogue-content"/>
</section>
</div>
</div>
</xsl:template>
<xsl:template match="items/item/title" mode="dialogue-content">
<h2>
<xsl:apply-templates mode="dialogue"/>
</h2>
</xsl:template>
<xsl:template match="items/item/description" mode="dialogue-content">
<section>
<xsl:apply-templates mode="dialogue-content"/>
</section>
</xsl:template>
<xsl:template match="items/item//line" mode="dialogue-content">
<p>
<xsl:apply-templates mode="dialogue-content"/>
</p>
</xsl:template>
<xsl:template match="items/item/footer" mode="dialogue-content">
<h3>
<xsl:apply-templates mode="dialogue"/>
</h3>
</xsl:template>
</xsl:stylesheet>
https://martin-honnen.github.io/xslt/2017/test2017091301.xml的在线示例。