Xml xsl：如何添加弹出模式
我正在尝试将W3schools.com上的弹出模式添加到每个。当用户点击任何一个按钮时，相应的、完整的和应该弹出。我的xml如下所示：Xml xsl：如何添加弹出模式,xml,xslt,Xml,Xslt,我正在尝试将W3schools.com上的弹出模式添加到每个。当用户点击任何一个按钮时，相应的、完整的和应该弹出。我的xml如下所示： <?xml version="1.0" encoding="UTF-8"?> <items> <item> <title>Header1</title> <description> <p>
<?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: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>
<!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>
您使用的代码用于单一模式对话，您需要对其进行扩展，以允许它与各种模式对话一起使用，下面是一个简单的Javascript/HTML/CSS组合： 变量模态={ currentModal:null， OpenModel:functionid{ this.currentmodel=document.getElementByIdid； this.currentmodel.style.display='block'； }, 关闭：功能{ 如果此.currentModal！=null{ this.currentmodel.style.display='none'； this.currentmodel=null； } } } //当用户单击模态之外的任何位置时，请将其关闭 window.onclick=functionevent{ 如果event.target==modals.currentmodel{ 情态动词； } } /*情态背景*/ .莫代尔{ 显示：无；/*默认情况下隐藏*/ 位置：固定；/*保持原位*/ z指数：1；/*位于顶部*/ 左：0； 排名：0； 宽度：100%；/*全宽*/ 高度：100%；/*全高*/ 溢出：自动；/*根据需要启用滚动*/ 背景色：rgb0,0,0；/*回退颜色*/ 背景色：rgba0,0,0,0.4；/*黑色w/不透明度*/ } /*模态内容/框*/ .模态内容{ 背景色：FEFE； 保证金：15%自动；/*15%从顶部和居中*/ 填充：20px； 边框：1px实心888； 宽度：80%；/*可能更多或更少，具体取决于屏幕大小*/ } /*关闭按钮*/ .结束{ 颜色：aaa； 浮动：对； 字号：28px； 字体大小：粗体； } .关闭：悬停， .结束：聚焦{ 颜色：黑色； 文字装饰：无； 光标：指针； } 开放式模式1 &时代； 模态1中的一些文本 开放式模式2 &时代； 模态2中的一些文本
在脚本标记中编写一个函数，然后使用onclick=attributebuttonui元素调用该方法。实际上，您正在创建具有相同ID的多个元素的破坏HTML，并且正在创建重复的脚本标记。好的，谢谢。因此，我创建了一个函数并添加了onclick，请参见上文。函数和onclick工作。但是，如果我添加myModal div，xsl仍然不会产生任何输出。@SteveDEU也许您没有阅读w3schools教程的步骤2和步骤3？我在html的头部添加了脚本和样式。问题是它下面没有产生任何结果。不清楚您想要实现什么，您正在将div元素放入p元素中，这是p元素不允许的内容，无论是在HTML4还是HTML5中。因此，根据您使用XSLT的方式，生成的HTML甚至可能没有您打算在那里创建的结构。此外，您应该创建一个最小但完整的示例来演示您的问题，如果您需要在HTML中使用脚本和CSS来模拟模态对话，那么您需要将其包括在内。我建议首先创建符合您需要的静态HTML，然后创建XSLT来生成该HTML。哇！伟大的谢谢Martin。嗨，Martin，我的实际xml有一个稍微不同的结构，我不知道您的解决方案将如何应用于实际的xml。对不起，您能帮我处理上面修改过的xml吗。请同时阅读修改后的问题。我花了几个小时，但运气不好。请帮助。@SteveDEU，我最后一次修改了这个示例，以后请确保您有一个清晰的问题描述，并将关注点与XSLT或HTML分离。