HTML div 可以移出浏览器窗口吗?
我正在研究 ASP.NET Web 部件,它有一个“下拉”div。它一直在页面的右侧。当我单击将其调出时,它就会从窗口中消失。通常,任何超出可视区域的内容都会触发底部滚动条。这怎么可能?
编辑:它是 Internet Explorer 8。下面是带有一些上下文的标记。我认为相关的是 id=WebPart_wp774658725VerbsMenu。默认情况下不显示。当您单击 td/span Verbs/span VerbsPopup(可以是任何)时,它会显示“下拉菜单”。在开发人员工具中,我没有看到任何 JavaScript 附加到这些元素,但如果我调试它,我会看到它正在运行一些。
<TD class=partTitle>
<TABLE style="WIDTH: 100%" border=0 cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD style="WIDTH: 100%; WHITE-SPACE: nowrap; CURSOR: move" id=WebPartTitle_wp774658725><SPAN title="Billing Information">Billing Information</SPAN> </TD>
<TD style="WHITE-SPACE: nowrap">
<SPAN style="PADDING-BOTTOM: 1px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; DISPLAY: inline-block; COLOR: white; CURSOR: hand; TEXT-DECORATION: none; PADDING-TOP: 1px" id=WebPart_wp774658725Verbs>
<SPAN style="FONT-FAMILY: Marlett; FONT-SIZE: 8pt" id=WebPart_wp774658725VerbsPopup>u</SPAN>
</SPAN>
<DIV style="DISPLAY: none" id=WebPart_wp774658725VerbsMenu>
<TABLE style="BORDER-BOTTOM: white 1px solid; BORDER-LEFT: white 1px solid; BACKGROUND-COLOR: maroon; WIDTH: 100%; BORDER-COLLAPSE: collapse; FONT-FAMILY: Arial; FONT-SIZE: 0.8em; BORDER-TOP: white 1px solid; BORDER-RIGHT: white 1px solid" cellSpacing=0 cellPadding=1>
<TBODY>
<TR>
<TD style="WHITE-SPACE: nowrap">
<DIV>
<A class=menuItem title="Deletes 'Billing Information'" onclick="if(document.body.__wpmDeleteWarning.length == 0 || confirm(document.body.__wpmDeleteWarning)){document.body.__wpm.SubmitPage('WebFormDisplay1$MainPageWPZ', 'delete:wp774658725');}" href="javascript:void(0)">
<IMG style="BORDER-BOTTOM-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-TOP-STYLE: none; VERTICAL-ALIGN: middle; BORDER-LEFT-STYLE: none" alt="Deletes 'Billing Information'" src="/WebResource.axd?d=5L7XWTaglMPmXRe6NJDkRg2&t=633802513995006876" width=16 height=16> Delete
</A>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
WebParts.js
function WebPartMenu_OnClick() {
var a = window.event.srcElement.__menu;
if (typeof a != "undefined" && a != null) {
cancelEvent(window.event);
a.Show()
}
}
function WebPartMenu_Show() {
if (typeof __wpm.menu != "undefined" && __wpm.menu != null) __wpm.menu.Hide();
var e = "<html><head><style>" + "a.menuItem, a.menuItem:Link { display: block; padding: 1px; text-decoration: none; " + this.itemStyle + " }" + "a.menuItem:Hover { " + this.itemHoverStyle + " }" + '</style><body scroll="no" style="border: none; margin: 0; padding: 0;" ondragstart="window.event.returnValue=false;" onclick="popup.hide()">' + this.menuElement.innerHTML + "<body></html>",
b = 16,
c = 16;
this.popup = window.createPopup();
__wpm.menu = this;
var d = this.popup.document;
d.write(e);
this.popup.show(0, 0, b, c);
var a = d.body;
b = a.scrollWidth;
c = a.scrollHeight;
if (b < this.menuLabelElement.offsetWidth) b = this.menuLabelElement.offsetWidth + 16;
if (this.menuElement.innerHTML.indexOf("progid:DXImageTransform.Microsoft.Shadow") != -1) a.style.paddingRight = "4px";
a.__wpm = __wpm;
a.__wpmDeleteWarning = __wpmDeleteWarning;
a.__wpmCloseProviderWarning = __wpmCloseProviderWarning;
a.popup = this.popup;
this.popup.hide();
this.popup.show(0, this.menuLabelElement.offsetHeight, b, c, this.menuLabelElement)
}
I was playing around with ASP.NET Web Parts which has a "drop down" div. It's all the way to the right of the page. When I click to bring it up, it goes off the window. Usually anything off the viewable area will trigger the bottom scrollbars. How is this possible?
Edit: It's Internet Explorer 8. Below is the markup with some context. The relevant one I think is id=WebPart_wp774658725VerbsMenu. By default it doesn't display. When you click on the td/span Verbs/span VerbsPopup (it could be any), it shows the "dropdown". In Developer Tools I don't see any JavaScript attached to those elements, but if I debug it I see it running some.
<TD class=partTitle>
<TABLE style="WIDTH: 100%" border=0 cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD style="WIDTH: 100%; WHITE-SPACE: nowrap; CURSOR: move" id=WebPartTitle_wp774658725><SPAN title="Billing Information">Billing Information</SPAN> </TD>
<TD style="WHITE-SPACE: nowrap">
<SPAN style="PADDING-BOTTOM: 1px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; DISPLAY: inline-block; COLOR: white; CURSOR: hand; TEXT-DECORATION: none; PADDING-TOP: 1px" id=WebPart_wp774658725Verbs>
<SPAN style="FONT-FAMILY: Marlett; FONT-SIZE: 8pt" id=WebPart_wp774658725VerbsPopup>u</SPAN>
</SPAN>
<DIV style="DISPLAY: none" id=WebPart_wp774658725VerbsMenu>
<TABLE style="BORDER-BOTTOM: white 1px solid; BORDER-LEFT: white 1px solid; BACKGROUND-COLOR: maroon; WIDTH: 100%; BORDER-COLLAPSE: collapse; FONT-FAMILY: Arial; FONT-SIZE: 0.8em; BORDER-TOP: white 1px solid; BORDER-RIGHT: white 1px solid" cellSpacing=0 cellPadding=1>
<TBODY>
<TR>
<TD style="WHITE-SPACE: nowrap">
<DIV>
<A class=menuItem title="Deletes 'Billing Information'" onclick="if(document.body.__wpmDeleteWarning.length == 0 || confirm(document.body.__wpmDeleteWarning)){document.body.__wpm.SubmitPage('WebFormDisplay1$MainPageWPZ', 'delete:wp774658725');}" href="javascript:void(0)">
<IMG style="BORDER-BOTTOM-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-TOP-STYLE: none; VERTICAL-ALIGN: middle; BORDER-LEFT-STYLE: none" alt="Deletes 'Billing Information'" src="/WebResource.axd?d=5L7XWTaglMPmXRe6NJDkRg2&t=633802513995006876" width=16 height=16> Delete
</A>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
WebParts.js
function WebPartMenu_OnClick() {
var a = window.event.srcElement.__menu;
if (typeof a != "undefined" && a != null) {
cancelEvent(window.event);
a.Show()
}
}
function WebPartMenu_Show() {
if (typeof __wpm.menu != "undefined" && __wpm.menu != null) __wpm.menu.Hide();
var e = "<html><head><style>" + "a.menuItem, a.menuItem:Link { display: block; padding: 1px; text-decoration: none; " + this.itemStyle + " }" + "a.menuItem:Hover { " + this.itemHoverStyle + " }" + '</style><body scroll="no" style="border: none; margin: 0; padding: 0;" ondragstart="window.event.returnValue=false;" onclick="popup.hide()">' + this.menuElement.innerHTML + "<body></html>",
b = 16,
c = 16;
this.popup = window.createPopup();
__wpm.menu = this;
var d = this.popup.document;
d.write(e);
this.popup.show(0, 0, b, c);
var a = d.body;
b = a.scrollWidth;
c = a.scrollHeight;
if (b < this.menuLabelElement.offsetWidth) b = this.menuLabelElement.offsetWidth + 16;
if (this.menuElement.innerHTML.indexOf("progid:DXImageTransform.Microsoft.Shadow") != -1) a.style.paddingRight = "4px";
a.__wpm = __wpm;
a.__wpmDeleteWarning = __wpmDeleteWarning;
a.__wpmCloseProviderWarning = __wpmCloseProviderWarning;
a.popup = this.popup;
this.popup.hide();
this.popup.show(0, this.menuLabelElement.offsetHeight, b, c, this.menuLabelElement)
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
确实是 createPopup 方法起到了作用。这是 Internet Explorer 中的专有方法。
请参阅 http://msdn.microsoft.com/en -us/library/ms536392%28VS.85%29.aspx。
It is indeed the createPopup method that does the trick. It's a proprietary method in Internet Explorer.
See http://msdn.microsoft.com/en-us/library/ms536392%28VS.85%29.aspx.
为什么不在此处添加一点额外的边距呢?似乎是节省时间的最简单、最便宜的方法。
Why not add a little extra to the margin there? Seems like the most easiest and cheapest way to save time.