JavaScript窗口功能指南之創建彈出窗口
- 發布于:2019-11-05
- 共 272 人圍觀
var popupObj = window.createPopup();
當你創建了這個對象后,彈出窗口并不顯示。你必須要調用它的show方法:
popupObj.show(yOffset, xOffset, width, height, referenceObj)
在這里:
yOffset 是彈出窗口距離屏幕左上角的水平偏移。
xOffset 是彈出窗口距離屏幕左上角的垂直偏移。
width 是彈出窗口的寬度。
height 是彈出窗口的高度。
referenceObj 是一個可選參數,它替代屏幕左上角做為引用yOffset 和 xOffset 的參照。
讓我們示范一下新的彈出窗口的用處。如果你點擊下面的鏈接,一個所有這個教程的菜單就會彈出來。注意,當菜單彈出時,頁面就滾動回到它的頂部。我們怎么樣執行這個彈出窗口呢?首先,你需要定義一個可見菜單,它隨后會被轉載進彈出菜單。為了實現隱藏鏈接,可以將菜單放置到一個隱藏的位置。我們選擇位置(-1000,-1000),并在菜單的style標記中定義它(在HEAD段的某個地方):
<STYLE>
.menu {position: absolute; top: -1000; left: -1000}
</STYLE>
我們執行菜單做為表格的鏈接:
<TABLE CLASS=menuID=submenu>
<TR><TD NOWRAP>
<A HREF="names.html" TARGET="CONTENT">How to name your windows and frames</A>
</TD></TR>
<TR><TD NOWRAP>
<A HREF="open.html">How to open a new window</A>
</TD></TR>
<TR><TD NOWRAP>
<A HREF="features.html">How to specify the features of a new window</A>
</TD></TR>
<TR><TD NOWRAP>
<A HREF="utilize.html">How to utilize the window features</A>
</TD></TR>
<TR><TD NOWRAP>
<A HREF="exist.html">How to check if a window exists</A>
</TD></TR>
<TR><TD NOWRAP>
<A HREF="reference.html">How to close a window</A>
</TD></TR>
<TR><TD NOWRAP>
<A HREF="manipulate.html">How to manipulate a window</A>
</TD></TR>
<TR><TD NOWRAP>
<A HREF="write.html">How to write content to a window</A>
</TD></TR>
<TR><TD NOWRAP>
<A HREF="opener.html">How to reference the opener</A>
</TD></TR>
<TR><TD NOWRAP>
<A HREF="dialog.html">How to create a dialog box</A>
</TD></TR>
<TR><TD NOWRAP>
<A HREF="popup.html">How to create a pop-up window</A>
</TD></TR>
<TR><TD></TD></TR>
</TABLE>
鏈接本身(教程的頁面)不會改變URL,但是當被點擊時,就調用showMenu()函數:
<A HREF='#' ONCLICK='showMenu(this, submenu)'>Tutorial's Pages</A>
showMenu()函數有2個參數,一個是鏈接對象,它調用函數,另一個是菜單的ID。我們要采取的第一個行為是分配彈出窗口的body對象:
var popupBodyObj = popupObj.document.body;
然后,設置邊界為1象素,紫色,固體樣式:
popupBodyObj.style.border = "1px purple solid";
填充彈出窗口的內容絕不是一個瑣碎的工作,實現的一個方法就是使用innerHTML和outerHTML:
popupBodyObj.innerHTML = menuID.outerHTML;
接著,我們需要對頁面的所有鏈接指派onClick事件處理程序,定義這個事件的響應函數為doclick。
for (var i = 0; i < popupBodyObj.all.length; i++) {
if (popupBodyObj.all[i].tagName == "A")
popupBodyObj.all[i].onclick = doClick;
}
下面是showMenu()函數的全部代碼:
function showMenu(linkObj, menuID) {
var popupObj = window.createPopup();
var popupBodyObj = popupObj.document.body;
popupBodyObj.style.border = "1px purple solid";
popupBodyObj.innerHTML = menuID.outerHTML;
for (var i = 0; i < popupBodyObj.all.length; i++) {
if (popupBodyObj.all[i].tagName == "A")
popupBodyObj.all[i].onclick = doClick;
}
popupObj.show(0, linkObj.offsetHeight, menuID.offsetWidth, menuID.offsetHeight, linkObj);
}
函數的最后一條語句是顯示彈出窗口。我們將彈出窗口放置于調用它的鏈接linkObj旁邊。如果你省略了這個引用,彈出窗口將參照屏幕左上角被放置。水平偏移是0。為了避免窗口彈出時鏈接被隱藏,我們要設置對于鏈接高度的垂直偏移,linkObj.offsetHeight。很自然,我們設置窗口的寬度和高度為初始菜單的寬度(menuID.offsetWidth)和高度(menuID.offsetHeight)。
函數doClick()是一個2行代碼的程序,它修改當前窗口的URL(parent.href)為點擊鏈接的URL(this):
function doClick() {
parent.location = this.href;
return false;
}
總結
在這個教程中,我們試圖覆蓋JavaScript有關窗口相關特征的大多數內容。我們給你展示了如何根據你的要求打開一個新窗口,怎樣在窗口中寫內容,操縱它,關閉它。同時,我們介紹了如何引用打開窗口的父窗口。最后,我們接觸到2個特殊類型的窗口:對話框和彈出窗口。
標簽: