Question

我正在尝试显示一个模态弹出窗口，其中包含一些原始xml，但是当在弹出窗口中填充xml时，样式会下降。 xml是动态加载的，具体取决于哪个按钮请求xml。我的怀疑是，加载样式的脚本在单击事件发生时或模式中已不再可用的<xmp>标记对模式不再可用。我使用的漂亮字体脚本可以在xmp内正常运行，只是不能在弹出窗口中使用。

下面有一个模式弹出窗口 https://www.w3schools.com/howto/howto_css_modals.asp。

我正在使用通过<head></head>中的cdn链接的pretty print在模式中设置xml内容的样式。

当按下相应的按钮时，我将以这种方式动态显示原始xml：

<button class="expand" onclick="expand('0')">Expand Data</button>
<button class="expand" onclick="expand('1')">Expand Data</button>

<div id="xmlBox" class="xmlBox">
      <div class="expandContent">
        <span class="close">CLOSE</span>
        <pre  class="prettyprint">
            <xmp class="xml"></xmp>
        </pre>
      </div>
    </div>

<script>
var formattedXML = "<xml>text</xml>";
var formattedXML1 = "<xml>text1</xml>";
var arr = [formattedXML,formattedXML1];

function expand(i) {    
    document.getElementById("xmlBox").style.display = "block";
    document.getElementsByClassName("xml")[0].innerHTML=arr[i];
}
</script>

带有动态内容的模式弹出窗口会丢弃样式/脚本

0 个答案: