Question

我正在尝试调试一个遗留的Web应用程序，该应用程序使用bootstrap.js来提升模式，并使下面的页面变灰。警告，我不是JS / HTML / CCS开发人员，但显然现在这是我的。

代码可以正常运行，具体取决于iframe。当iframe由标准html组成时，它似乎工作正常。当iframe由WebFocus生成的这种奇怪的HTML组成时（只能在IE中正确呈现）。

无论如何，当模态打开时，对DOM进行以下更改：

这个div标签被添加到body元素中：

<div class="modal-backdrop fade in"></div>

相关的风格是：

/*media all*/
.in.modal-backdrop {
    filter: alpha(opacity=50);
    opacity: 0.5;
}


/*media all*/
.fade.modal-backdrop {
    filter: alpha(opacity=0);
    opacity: 0;
}

此外，open-modal样式应用于body元素，如下所示：

<body class="modal-open">

使用相关的样式：

/*media all*/
.modal-open {
    overflow: hidden;
}

现在我希望模态背景样式必须应用于除空div标签之外的其他东西才能工作。这是如何运作的？为什么在应用于一种类型的iframe而不是另一种iframe时会起作用。

iframe如下：

<iframe name="Report Content" width="100%" height="400" title="Webfocus HTML Report" id="htmlReportFrame" src="/path/to/webfocus/report?reportParam=123456" onreadystatechange="readyStateChange()" onload="return readyStateChange();">Your
            browser does not support IFRAMES</iframe>

iframe的报告引用（/ path / to / webfocus / report？reportParam = 123456）返回：

<html>
<head>
<title>Figure 1</title>
<style type="text/css">
<!--
@media screen {
 .spacer { height:792pt; }
}
@media print {
 .spacer { height:792pt; }
}
.x1 {
 white-space:nowrap;
 font-family:Arial;
 font-size:7pt;
 color:#000000;
 }
.x2 {
 white-space:nowrap;
 font-family:Arial;
 font-size:9pt;
 font-weight:bold;
 color:#000000;
 }
.x3 {
 white-space:nowrap;
 font-family:Arial;
 font-size:9pt;
 font-weight:bold;
 color:#000000;
 text-align:left;
 }
.x4 {
 white-space:nowrap;
 font-family:Arial;
 font-size:7pt;
 font-weight:bold;
 color:#000000;
 text-align:center;
 }
.x5 {
 white-space:nowrap;
 font-family:Arial;
 font-size:7pt;
 font-weight:bold;
 color:#000000;
 }
.x6 {
 white-space:nowrap;
 font-family:Arial;
 font-size:7pt;
 font-weight:bold;
 color:#000000;
 }
.x7 {
 white-space:nowrap;
 font-family:Arial;
 font-size:7pt;
 font-weight:bold;
 color:#000000;
 }
.x8 {
 white-space:nowrap;
 font-family:Courier New;
 font-size:12pt;
 }
.x9 {
 white-space:nowrap;
 font-family:Courier New;
 font-size:12pt;
 }
-->
</style>
</head>
<body>
<div style="position:relative" class="spacer">
<div style="position:absolute;top:216pt;left:104pt;width:434pt;height:1pt;background-color:#000000;
border-top:#000000 1.00pt solid;
border-bottom:#000000 1.00pt solid;
border-left:#000000 1.00pt solid;
border-right:#000000 1.00pt solid;
 font-size:1pt"></div>
<div style="position:absolute;top:237pt;left:104pt;width:432pt;height:1pt;background-color:#000000;
border-top:#000000 1.00pt solid;
border-bottom:#000000 1.00pt solid;
border-left:#000000 1.00pt solid;
border-right:#000000 1.00pt solid;
 font-size:1pt"></div>
<div style="position:absolute;top:218pt;left:104pt;width:1pt;height:21pt;background-color:#000000;
border-top:#000000 1.00pt solid;
border-bottom:#000000 1.00pt solid;
border-left:#000000 1.00pt solid;
border-right:#000000 1.00pt solid;
"></div>
<div style="position:absolute;top:218pt;left:536pt;width:1pt;height:21pt;background-color:#000000;
border-top:#000000 1.00pt solid;
border-bottom:#000000 1.00pt solid;
border-left:#000000 1.00pt solid;
border-right:#000000 1.00pt solid;
"></div>
<IMG SRC="file:///C:/orange_purple25x12.gif" style='position:absolute;left:108pt;top:222pt;width=25pt;height=12pt;' >
<IMG SRC="file:///C:/blueline5025x12.gif" style='position:absolute;left:252pt;top:222pt;width=25pt;height=12pt;' >
<IMG SRC="file:///C:/yellowlavender25x12.gif" style='position:absolute;left:396pt;top:222pt;width=25pt;height=12pt;' >
<div style="position:absolute;top:221pt;left:136pt; text-align:left;">
<span class='x5'>Category 1</span></div>
<div style="position:absolute;top:221pt;left:280pt; text-align:left;">
<span class='x6'>Category 2</span></div>
<div style="position:absolute;top:221pt;left:424pt; text-align:left;">
<span class='x7'>Category 3</span></div>
<div style="position:absolute;top:0pt;left:36pt; text-align:left;">
<span class='x2'>&nbsp;</span></div>
<div style="position:absolute;top:11pt;left:36pt; text-align:left;">
<span class='x3'>Figure Name</span></div>
<div style="position:absolute;top:23pt;left:297pt; text-align:left;">
<span class='x4'>United</span></div>
<IMG SRC="file:///C:/IBIUniqueName0.png" style='position:absolute;left:36pt;top:33pt;' >
<div style="position:absolute;top:28pt;left:36pt; text-align:left;">
<span class='x8'>&nbsp;</span></div>
</div>
</body>
</html>

它看起来像标准的html，除了它引用不存在的本地图像文件（例如file：/// C：/IBIUniqueName0.png）。我相信它们是使用某种奇怪的mime类型传送到浏览器的，但我不知道如何。

我可以发布更多代码，但我需要删除敏感信息。

bootstrap.js如何使背景变灰

0 个答案: