1、window.open(pageURL,name,parameters)
創(chuàng)新互聯(lián)建站是網(wǎng)站建設(shè)技術(shù)企業(yè),為成都企業(yè)提供專業(yè)的網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì),網(wǎng)站設(shè)計(jì),網(wǎng)站制作,網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制適合企業(yè)的網(wǎng)站。十載品質(zhì),值得信賴!
pageURL 為彈出窗口路徑;
name 為彈出窗口名稱,也可以是系統(tǒng)自帶的比如:_self, _blank,_top,_parent ... ;
parameters 為窗口參數(shù)(各參數(shù)用逗號(hào)分隔) ;
各項(xiàng)參數(shù)
其中yes/no也可使用1/0,pixel value為具體的數(shù)值,單位象素。
參數(shù) 取值范圍 說(shuō)明
alwaysLowered yes/no 指定窗口隱藏在所有窗口之后
alwaysRaised yes/no 指定窗口懸浮在所有窗口之上
depended yes/no 是否和父窗口同時(shí)關(guān)閉
directories yes/no Nav2和3的目錄欄是否可見(jiàn)
height pixel value 窗口高度
hotkeys yes/no 在沒(méi)菜單欄的窗口中設(shè)安全退出熱鍵
innerHeight pixel value 窗口中文檔的像素高度
innerWidth pixel value 窗口中文檔的像素寬度
location yes/no 位置欄是否可見(jiàn)
menubar yes/no 菜單欄是否可見(jiàn)
outerHeight pixel value 設(shè)定窗口(包括裝飾邊框)的像素高度
outerWidth pixel value 設(shè)定窗口(包括裝飾邊框)的像素寬度
resizable yes/no 窗口大小是否可調(diào)整
screenX pixel value 窗口距屏幕左邊界的像素長(zhǎng)度
screenY pixel value 窗口距屏幕上邊界的像素長(zhǎng)度
scrollbars yes/no 窗口是否可有滾動(dòng)欄
titlebar yes/no 窗口題目欄是否可見(jiàn)
toolbar yes/no 窗口工具欄是否可見(jiàn)
Width pixel value 窗口的像素寬度
z-look yes/no 窗口被激活后是否浮在其它窗口之上
常用示例:
window.open ('page.html', 'newwindow', 'fullscreen'); //全屏
window.open ('page.html', '_self', 'fullscreen = yes , height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no,resizable=no,location=no, status=no'); // 在當(dāng)前頁(yè)面彈出一個(gè)全屏的窗口,并有詳細(xì)的設(shè)置
popWin = window.open('test.jsp'); // 獲取彈出窗口對(duì)象,以便進(jìn)行操作
popWin .focus(); // 聚焦窗口2、window.alert()參數(shù),只有一個(gè),顯示警告框的信息;無(wú)返回值。
3、window.confirm() 參數(shù)就只有一個(gè)。顯示提示框的信息。按確定,返回true;按取消返回false。
4、window.prompt()參數(shù),有兩個(gè),第一個(gè)參數(shù),顯示提示輸入框的信息。第二個(gè)參數(shù),用于顯示輸入框的默認(rèn)值。返回,用戶輸入的值。
5、window.showModalDialog()方法用來(lái)創(chuàng)建一個(gè)顯示HTML內(nèi)容的模態(tài)對(duì)話框。window.showModelessDialog()方法用來(lái)創(chuàng)建一個(gè)顯示HTML內(nèi)容的非模態(tài)對(duì)話框。
showModalDialog()與showModelessDialog()的區(qū)別,在于showModalDialog()打開(kāi)的窗口,置在父窗口上,必須關(guān)閉才能訪問(wèn)父窗口;showModelessDialog(),打開(kāi)后不必關(guān)閉也可訪問(wèn)父窗口打開(kāi)的窗口。使用方法:
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures]);
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures]);
參數(shù)說(shuō)明:
sURL--
必選參數(shù),類型:字符串。用來(lái)指定對(duì)話框要顯示的文檔的URL。
vArguments--
可選參數(shù),類型:變體。用來(lái)向?qū)υ捒騻鬟f參數(shù)。傳遞的參數(shù)類型不限,包括數(shù)組等。對(duì)話框通過(guò)window.dialogArguments來(lái)取得傳遞進(jìn)來(lái)的參數(shù)。
sFeatures--
可選參數(shù),類型:字符串。用來(lái)描述對(duì)話框的外觀等信息,可以使用以下的一個(gè)或幾個(gè),用分號(hào)隔開(kāi)。
1.dialogHeight :對(duì)話框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默認(rèn)的單位是em,而IE5中是px,為方便其見(jiàn),在定義modal方式的對(duì)話框時(shí),用px做單位。
2.dialogWidth: 對(duì)話框?qū)挾取?/p>
3.dialogLeft: 離屏幕左的距離。
4.dialogTop: 離屏幕上的距離。
5.center: {yes no 1 0 }:窗口是否居中,默認(rèn)yes,但仍可以指定高度和寬度。
6.help: {yes no 1 0 }:是否顯示幫助按鈕,默認(rèn)yes。
7.resizable: {yes no 1 0 } [IE5+]:是否可被改變大小。默認(rèn)no。
8.status: {yes no 1 0 } [IE5+]:是否顯示狀態(tài)欄。默認(rèn)為yes[ Modeless]或no[Modal]。
9.scroll:{ yes no 1 0 on off }:指明對(duì)話框是否顯示滾動(dòng)條。默認(rèn)為yes。 參數(shù)傳遞:
要想對(duì)話框傳遞參數(shù),是通過(guò)vArguments來(lái)進(jìn)行傳遞的。類型不限制,對(duì)于字符串類型,最大為4096個(gè)字符。也可以傳遞對(duì)象,例如:
調(diào)用頁(yè)面
script
var obj = new Object();
obj.name="LOVEJS";
window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");
/script
對(duì)話框頁(yè)面
script
var obj = window.dialogArguments ;
alert("您傳遞的參數(shù)為:" + obj.name)
/script 獲取對(duì)象:
可以通過(guò)window.returnValue向打開(kāi)對(duì)話框的窗口返回信息,當(dāng)然也可以是對(duì)象。例如:
調(diào)用頁(yè)面
script
str = window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");
alert(str);
/script
對(duì)話框頁(yè)面
script
window.returnValue="在這里進(jìn)行你要的操作";
/script
原生JS 有3種最常用的彈窗方式
最最最常用的是 alert()
alert 引發(fā)的彈窗,只有一個(gè)“確定”按鈕。
alert( 內(nèi)容 );
內(nèi)容可以是變量,可以是字符串。
字符串需要用單引號(hào)或者雙引號(hào)括起來(lái)。
需要注意的是,內(nèi)容如果是 html 標(biāo)簽,是會(huì)直接輸出字符串的。
如果需要換行,需要用到 html 的轉(zhuǎn)義字符。
alert 無(wú)法直接展示 object。
confirm 對(duì)比 alert,會(huì)多出一個(gè)“取消”按鈕。
而且 confirm 有一個(gè)回調(diào)值。
如果點(diǎn)擊了“確定”,返回值為:true
如果點(diǎn)擊了“取消”,返回值為:false
prompt 的比 confirm 多一個(gè)輸入框。
同樣,prompt 也是有返回值的。
如果按了確定,返回值是 輸入的內(nèi)容,字符串型。
如果按了取消,返回值是:null。
[img]html
head
titleJs彈出浮動(dòng)窗口,支持鼠標(biāo)拖動(dòng)和關(guān)閉/title
meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/
script?type="text/javascript"
/**
關(guān)于一些參數(shù)說(shuō)明:
*bodycontent:要在窗口顯示的內(nèi)容,dom對(duì)象
*title:窗口標(biāo)題,字符串類型
*removeable:窗口能否拖動(dòng),布爾類型
*注意:內(nèi)容窗體的高度是height-30px,請(qǐng)計(jì)算好你要顯示的內(nèi)容的高度和寬度。彈出窗的id為"223238909",所以你的頁(yè)面不要再取值為"223238909"的id了,以防js執(zhí)行出錯(cuò)*/
function?createdialog(width,height,bodycontent,title,removeable){
if(document.getElementById("www_phpstudy_net")==null){
/*創(chuàng)建窗口的組成元素*/
var?dialog?=?document.createElement("div");
var?dialogtitlebar=?document.createElement("div");
var?dialogbody?=?document.createElement("div");
var?dialogtitleimg?=?document.createElement("span");
var?dialogtitle?=?document.createElement("span");
var?dialogclose?=?document.createElement("span");
var?closeaction?=?document.createElement("button");
/*為窗口設(shè)置一個(gè)id,id如此怪異是為了盡量避免與其他用戶取的id相同而出錯(cuò)*/
dialog.id?=?"223238909";
/*組裝對(duì)話框標(biāo)題欄,按從里到外的順序組裝*/
dialogtitle.innerHTML?=?title;
dialogtitlebar.appendChild(dialogtitleimg);
dialogtitlebar.appendChild(dialogtitle);
dialogtitlebar.appendChild(dialogclose);
dialogclose.appendChild(closeaction);
/*組裝對(duì)話框主體內(nèi)容*/
if(bodycontent!=null){
bodycontent.style.display?=?"block";
dialogbody.appendChild(bodycontent);
}
/*組裝成完整的對(duì)話框*/
dialog.appendChild(dialogtitlebar);
dialog.appendChild(dialogbody);
/*設(shè)置窗口組成元素的樣式*/
var?templeft,temptop,tempheight//窗口的位置(將窗口放在頁(yè)面中間的輔助變量)
var?dialogcssText,dialogbodycssText;//拼出dialog和dialogbody的樣式字符串
templeft?=?(document.body.clientWidth-width)/2;
temptop?=?(document.body.clientHeight-height)/2;
tempheight=?height-30;
dialogcssText=?"position:absolute;background:#65c294;padding:1px;border:4px;top:"+temptop+"px;left:"+templeft+"px;height:"+height+"px;width:"+width+"px;";
dialogbodycssText?=?"width:100%;background:#ffffff;"+"height:"?+?tempheight?+?"px;";
dialog.style.cssText?=?dialogcssText;
dialogtitlebar.style.cssText?=?"height:30px;width:100%;background:url(images/titlebar.png)?repeat;cursor:move;";
dialogbody.style.cssText??=?dialogbodycssText;
dialogtitleimg.style.cssText?=?"float:left;height:20px;width:20px;background:url(images/40.gif);"+"display:block;margin:4px;line-height:20px;";
dialogtitle.style.cssText?=?"font-size:16px;float:left;display:block;margin:4px;line-height:20px;";
dialogclose.style.cssText??=?"float:right;display:block;margin:4px;line-height:20px;";
closeaction.style.cssText?=?"height:20px;width:24px;border-width:1px;"+"background-image:url(images/close.png);cursor:pointer;";
/*為窗口元素注冊(cè)事件*/
var?dialogleft?=?parseInt(dialog.style.left);
var?dialogtop?=?parseInt(dialog.style.top);
var?ismousedown?=?false;//標(biāo)志鼠標(biāo)是否按下
/*關(guān)閉按鈕的事件*/???????
closeaction.onclick?=?function(){
dialog.parentNode.removeChild(dialog);
}
/*實(shí)現(xiàn)窗口的移動(dòng),這段代碼很典型,網(wǎng)上很多類似的代碼*/
if(removeable?==?true){
var?ismousedown?=?false;
var?dialogleft,dialogtop;
var?downX,downY;
dialogleft?=?parseInt(dialog.style.left);
dialogtop?=?parseInt(dialog.style.top);
dialogtitlebar.onmousedown?=?function(e){
ismousedown?=?true;
downX?=?e.clientX;
downY?=?e.clientY;
}
document.onmousemove?=?function(e){
if(ismousedown){
dialog.style.top?=?e.clientY?-?downY?+?dialogtop?+?"px";
dialog.style.left?=?e.clientX?-?downX?+?dialogleft?+?"px";
}
}
/*松開(kāi)鼠標(biāo)時(shí)要重新計(jì)算當(dāng)前窗口的位置*/
document.onmouseup?=?function(){
dialogleft?=?parseInt(dialog.style.left);
dialogtop?=?parseInt(dialog.style.top);
ismousedown?=?false;
}
}
return?dialog;?
}//end?if(if的結(jié)束)
}
/script
style
table{background:#b2d235;}
button{font-size:12px;height:23;background:#ece9d8;border-width:1;}
#linkurl,#linkname,#savelink{width:100px;}
/style
/head
body
!--?顯示窗口的地方?--
div?id="here"/diva?id="clickhere"?href="#"點(diǎn)擊生成窗口/a
!--?要嵌入到窗口的內(nèi)容?--
div?id="login"?style="display:none;"
form?action="#"?method="post"?onSubmit="return?false;"
table?width="400"?height="95"
tr
td?width="78"鏈接文字/td
td?width="168"input?name="link.name"?type="text"http://td
td?width="138"?id="linktext"/td
/tr
tr
td鏈接地址/td
tdinput?name="link.url"?type="text"http://td
td?id="linkurl"/td
/tr
tr
td/td
tdbutton?type="submit"?style="float:right;"添加/button/td
td?id="savelink"/td
/tr
/table
/form
/div
script?type="text/javascript"
var?here?=?document.getElementById("here");
var?login?=?document.getElementById("login");
var?clickhere?=?document.getElementById("clickhere");
clickhere.onclick?=?function(){
here.appendChild(createdialog(400,95+30,login,"歡迎光臨phpstudy",true));
}
/script
/body
/html