javascript之彈出窗口居中的代碼

更新時(shí)間：2007年08月24日 22:49:39 作者：

有時(shí)候我們?cè)诰W(wǎng)頁(yè)制作過(guò)程中需要彈出窗口，一般情況下，我們更希望窗口可以居中顯示

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

javascript彈出窗口居中代碼

下面給兩個(gè)彈出屏幕居中窗口的例子

復(fù)制代碼代碼如下:

window.open()方式 
function ShowDialog(url) { 
var iWidth=300; //窗口寬度 
var iHeight=200;//窗口高度 
var iTop=(window.screen.height-iHeight)/2; 
var iLeft=(window.screen.width-iWidth)/2; 
window.open(url,"Detail","Scrollbars=no,Toolbar=no,Location=no,Direction=no,Resizeable=no, 
Width="+iWidth+" ,Height="+iHeight+",top="+iTop+",left="+iLeft); 
} 

window.showModalDialog方式

復(fù)制代碼代碼如下:

function ShowDialog(url) { 
var iWidth=300; //窗口寬度 
var iHeight=200;//窗口高度 
var iTop=(window.screen.height-iHeight)/2; 
var iLeft=(window.screen.width-iWidth)/2; 
window.showModalDialog(url,window,"dialogHeight: "+iHeight+"px; dialogWidth: "+iWidth+"px; 
dialogTop: "+iTop+"; dialogLeft: "+iLeft+"; resizable: no; status: no;scroll:no"); 
} 

注意這里的第二個(gè)參數(shù)，window

用戶必須在這個(gè)彈出式窗體中輸入信息后才能訪問(wèn)其他的窗體是模態(tài)窗體就是用第二個(gè)方法就好了

javascript彈出窗口居中四：

復(fù)制代碼代碼如下:

 
function selectCustomer(){ 
var iTop = (window.screen.availHeight-30-500)/2; 
var iLeft = (window.screen.availWidth-10-750)/2; 
window.open("../customer/creditApprManage.do?method=toGetCustomer", 
"searchCorp", 
"height=500,width=750,top="+iTop+",left="+iLeft+",toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no" 
); 
} 

說(shuō)明：500和750是硬編碼，可以通過(guò)參數(shù)傳入。

您可能感興趣的文章:

彈出窗口

相關(guān)文章

JavaScript之ECharts用法講解
這篇文章主要介紹了JavaScript之ECharts用法講解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
2021-08-08
新手如何快速理解js異步編程
這篇文章主要介紹了新手如何快速理解js異步編程，異步編程從早期的 callback、事件發(fā)布\訂閱模式到 ES6 的 Promise、Generator 在到 ES2017 中 async，看似風(fēng)格迥異，但是還是有一條暗線將它們串聯(lián)在一起的，,需要的朋友可以參考下
2019-06-06
利用Print.js實(shí)現(xiàn)打印pdf、HTML及圖片(可設(shè)置樣式可分頁(yè))
在我們需要在頁(yè)面中打印某個(gè)區(qū)域的內(nèi)容或者生成pdf的時(shí)候,我們可以直接用printJs庫(kù),這篇文章主要給大家介紹了關(guān)于利用Print.js實(shí)現(xiàn)打印pdf、HTML及圖片的相關(guān)資料,可設(shè)置樣式可分頁(yè),需要的朋友可以參考下
2024-05-05
簡(jiǎn)述JavaScript提交表單的方式（Using JavaScript Submit Form）
這篇文章主要介紹了簡(jiǎn)述JavaScript提交表單的方式（Using JavaScript Submit Form）的相關(guān)資料,需要的朋友可以參考下
2016-03-03
JavaScript實(shí)現(xiàn)橫向滑出的多級(jí)菜單效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)橫向滑出的多級(jí)菜單效果,涉及JavaScript數(shù)學(xué)運(yùn)算及頁(yè)面元素樣式動(dòng)態(tài)變換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-10-10
一次圍繞setTimeout的前端面試經(jīng)驗(yàn)分享
這篇文章主要跟大家分享了一次圍繞setTimeout展開的前端面試經(jīng)驗(yàn)，是一篇有意思的圍繞setTimeout展開的前端開發(fā)考題，考察了for循環(huán)、定時(shí)器setTimeout()、JavaScript閉包、匿名函數(shù)和Promise等，一不小心你可能就會(huì)做錯(cuò)，快來(lái)看看你有沒有掌握了上面的知識(shí)。
2017-06-06
JavaScript實(shí)現(xiàn)簡(jiǎn)單圖片輪播效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單圖片輪播效果，點(diǎn)擊下標(biāo)切換到該圖片上，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
javascript:google 向上向下滾動(dòng)特效,兼容IE6,7,8,FF
這個(gè)代碼是我之前帶網(wǎng)上找的，因?yàn)榻裉煸俅斡玫?，所以記錄下?lái)，免得以后都找不到，我現(xiàn)在想去搜它的說(shuō)明文檔都搜不到！
2010-08-08
一文剖析JavaScript中閉包的難點(diǎn)
這篇文章主要為大家詳細(xì)介紹了JavaScript中閉包的一些難點(diǎn)，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)JavaScript有一定幫助，需要的可以參考一下
2022-09-09
RxJS的入門指引和初步應(yīng)用
這篇文章主要介紹了RxJS的入門指引和初步應(yīng)用，RxJS是一個(gè)強(qiáng)大的Reactive編程庫(kù)，提供了強(qiáng)大的數(shù)據(jù)流組合與控制能力，但是其學(xué)習(xí)門檻一直很高，本次分享期望從一些特別的角度解讀它在業(yè)務(wù)中的使用，而不是從API角度去講解。,需要的朋友可以參考下
2019-06-06