JS彈出窗口


轉載鏈接：http://www.jb51.net/article/32747.htm


如何利用網頁彈出各種形式的窗口，我想大家大多都是知道些的，但那種多種多樣的彈出式窗口是怎么搞出來的，我們今天就來學習一下：?
1.彈啟一個全屏窗口?

windows.open('http://www.jb51.net','腳本之家','fullscreen');

2.彈啟一個被F11化后的窗口? 
windows.open('http://www.jb51.net','腳本之家','channelmode');

3.彈啟一個帶有收藏鏈接工具欄的窗口? 
windows.open('www.wangye8.com','腳本之家','width=400,height=300,directories');

4.網頁對話框? 
<html> 
<SCRIPT LANGUAGE="javascript"> 
<!-- 
showModalDialog('http://www.jb51.net,'腳本之家','dialogWidth:400px;dialogHeight:300px; 
dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes') 
//--> 
</SCRIPT> 
<b>www.wangye8.com</b> 
</body> 
</html> 
<html> 
<SCRIPT LANGUAGE="javascript"> 
<!-- 
showModelessDialog('http://www.jb51.net,'腳本之家','dialogWidth:400px;dialogHeight:300px; 
dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes') 
//--> 
</SCRIPT> 
<b>http://www.wangye8.com</b> 
</body> 
</html>

showModalDialog()或是showModelessDialog() 來調用網頁對話框，至于showModalDialog()與showModelessDialog()的區別，在于showModalDialog()打開的窗口（簡稱模式窗口），置在父窗口上，必須關閉才能訪問父窗口(建議盡量少用，以免招人反感)；showModelessDialog()?
dialogHeight: iHeight 設置對話框窗口的高度。?
dialogWidth: iWidth 設置對話框窗口的寬度。?
dialogLeft: iXPos 設置對話框窗口相對于桌面左上角的left位置。?
dialogTop: iYPos 設置對話框窗口相對于桌面左上角的top位置。?
center: {yes | no | 1 | 0 } 指定是否將對話框在桌面上居中，默認值是“yes”。?
help: {yes | no | 1 | 0 } 指定對話框窗口中是否顯示上下文敏感的幫助圖標。默認值是“yes”。?
resizable: {yes | no | 1 | 0 } 指定是否對話框窗口大小可變。默認值是“no”。?
status: {yes | no | 1 | 0 } 指定對話框窗口是否顯示狀態欄。對于非模式對話框窗口，默認值是“yes”；對于模式對話框窗口，默認值是 “no”。


5、其他彈出窗口代碼?
經常上網的朋友可能到過這樣一些網站，一進入首頁立刻會彈出一個窗口，或者按一個鏈接或按鈕彈出，通常在這個窗口里會顯示一些注意事項、版權信息、警告、歡迎光顧之類的話或者作者想要特別提示的信息。其實制作這樣的頁面非常容易，只要往該頁面的HTML里加入幾段java script代碼即可實現。下面我就帶你剖析它的奧秘。


【最基本的彈出窗口代碼】? 
<SCRIPT LANGUAGE="java script"> 
<!-- 
window.open ('page.html') 
--> 
</SCRIPT>

因為這是一段java script代碼，所以它們應該放在<SCRIPT LANGUAGE ="java script">標簽和</script>之間。<!--和-->是對一些版本低的瀏覽器起作用，在這些老瀏覽器中如果不支持java script，不會將標簽中的代碼作為文本顯示出來。?
Window.open ('page.html')用于控制彈出新的窗口page.html，如果page.html不與主窗口在同一路徑下，前面應寫明路徑，絕對路徑(http://)和相對路徑(../)均可。?
用單引號和雙引號都可以，只是不要混用。?
這一段代碼可以加入HTML的任意位置，加入到<head>和</head>之間也可以，位置越靠前執行越早，尤其是頁面代碼較長時，又想使頁面早點彈出就盡量往前放。


【經過設置后的彈出窗口】?
下面再說一說彈出窗口外觀的設置。只要再往上面的代碼中加一點東西就可以了。?
我們來定制這個彈出窗口的外觀、尺寸大小、彈出位置以適應該頁面的具體情況。? 
<SCRIPT LANGUAGE="java script:> 
<!-- 
window.open ('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no, 
location=no,status=no') 
//寫成一行 
--> 
</SCRIPT>
參數解釋：?
<SCRIPT LANGUAGE="java script"> js腳本開始；?
window.open 彈出新窗口的命令；?
page.html 彈出新窗口的文件名；?
newwindow 彈出窗口的名字（不是文件名），可用空 ″代替；?
height=100 窗口高度；?
top=0 窗口距離屏幕上方的像素值；?
left=0 窗口距離屏幕左側的像素值；?
toolbar=no 是否顯示工具欄，yes為顯示；?
menubar,scrollbars 表示菜單欄和滾動欄；?
resizable=no 是否允許改變窗口大小，yes為允許；?
location=no 是否顯示地址欄，yes為允許；?
status=no 是否顯示狀態欄內的信息（通常是文件已經打開），yes為允許；?
</SCRIPT> js腳本結束。


【用函數控制彈出窗口】?
下面是一個完整的代碼。 
<html> 
<head> 
<script LANGUAGE="java script"> 
<!-- 
function openwin(){ 
window.open("page.html","newwindow","height=100,width=400,toolbar=no,menubar=no,scrollbars=no,resizable=no, 
location=no,status=no";) 
//寫成一行 
} 
--> 
</script> 
</head> 
<body > 
...任意的頁面內容... 
</body> 
</html>

這里定義了一個函數openwin(),函數內容就是打開一個窗口。在調用它之前沒有任何用途。怎么調用呢？?
方法一：<body > 瀏覽器讀頁面時彈出窗口；?
方法二：<body > 瀏覽器離開頁面時彈出窗口；?
方法三：用一個連接調用：<a href="#" >打開一個窗口</a>?
注意：使用的"#"是虛連接。?
方法四：用一個按鈕調用：<input type="button" value="打開窗口">?


【主窗口打開文件1.htm，同時彈出小窗口page.html】?
將如下代碼加入主窗口<head>區：? 
<script language="java script"> 
<!-- 
function openwin(){ 
window.open("page.html","","width=200,height=200" ;) 
} 
//--> 
</script>

加入<body>區：<a href="1.htm" >open</a>即可。?

【彈出的窗口之定時關閉控制】?
下面我們再對彈出窗口進行一些控制，效果就更好了。如果我們再將一小段代碼加入彈出的頁面（注意是加入到page.html的HTML中，可不是主頁面中，否則…），讓它在10秒鐘后自動關閉是不是更酷了？?
首先，將如下代碼加入page.html文件的<head>區：? 
<script language="java script"> 
function closeit() { 
setTimeout("self.close()",10000) //毫秒 
} 
</script>

然后，再用<body >這一句話代替page.html中原有的<BODY>這一句就可以了。（這一句話千萬不要忘記寫啊！這一句的作用是調用關閉窗口的代碼，10秒鐘后就自行關閉該窗口。）


【在彈出窗口中加上一個關閉按鈕】? 
<form> 
<INPUT TYPE='BUTTON' value='關閉' 
</form>

【內包含的彈出窗口——一個頁面兩個窗口】?
上面的例子都包含兩個窗口，一個是主窗口，另一個是彈出的小窗口。?
通過下面的例子，你可以在一個頁面內完成上面的效果。? 
<html> 
<head> 
<SCRIPT LANGUAGE="java script"> 
function openwin() 
{ 
OpenWindow=window.open("","newwin","height=250,width=250,toolbar=no,scrollbars="+scroll+",menubar=no";); 
//寫成一行 
OpenWindow.document.write("<TITLE>例子</TITLE>" ;) 
OpenWindow.document.write("<BODY BGCOLOR=#FFFFFF>" ;) 
OpenWindow.document.write("<H1>Hello!</h1>" ;) 
OpenWindow.document.write("New window opened!" ;) 
OpenWindow.document.write("</BODY >" ;) 
OpenWindow.document.write("</HTML>" ;) 
OpenWindow.document.close() 
} 
</script> 
</head> 
<body> 
<a href="#" >打開一個窗口</a> 
<input type="button" value="打開窗口"> 
</body> 
</html>

看看OpenWindow.document.write()里面的代碼不就是標準的HTML嗎？只要按照格式寫更多的行即可。千萬注意多一個標簽或少一個標簽都會出現錯誤。記住用OpenWindow.document.close()結束啊。


【終極應用——彈出窗口的Cookie控制】?
回想一下，上面的彈出窗口雖然酷，但是有一點小毛病（你沉浸在喜悅之中，一定沒有發現吧？）比如你將上面的腳本放在一個需要頻繁經過的頁面里（例如首頁），那么每次刷新這個頁面，窗口都會彈出一次，是不是非常煩人？有解決的辦法嗎？Yes!Follow me。我們使用Cookie來控制一下就可以了。?
首先，將如下代碼加入主頁面HTML的<HEAD>區：? 
<script> 
function openpopup(){ 
window.open("hello.htm","","width=300,height=300") //自己修改彈出窗口 
} 
function get_cookie(Name) { 
var search = Name + "=" 
var returnvalue = ""; 
if (documents.cookie.length > 0) { 
offset = documents.cookie.indexOf(search) 
if (offset != -1) { // if cookie exists 
offset += search.length 
// set index of beginning of value 
end = documents.cookie.indexOf(";", offset); 
// set index of end of cookie value 
if (end == -1) 
end = documents.cookie.length; 
returnvalue=unescape(documents.cookie.substring(offset, end)) 
} 
} 
return returnvalue; 
} 
function loadpopup(){ 
if (get_cookie('popped')==''){ 
openpopup() 
documents.cookie="popped=yes" 
} 
} 
</script> 
</head>

將如下代碼鍵入BODY區：?
<body > //pop when leave page?
或者：?
<body > //pop when enter page?
你可以試著刷新一下這個頁面或重新進入該頁面，窗口再也不會彈出了。真正的Pop-Only-Once!?
寫到這里，彈出窗口的制作和應用技巧基本上算是講完了，希望對正在制作網頁的朋友有所幫助我就非常欣慰了。?
需要注意的是，JS腳本中的大小寫最好前后保持一致。?
沒有菜單、工具欄、地址欄的彈出窗口：? 
<script language="java script"> 
<!-- 
var gt = unescape('%3e'); 
var popup = null; 
var over = "Launch Pop-up Navigator"; 
popup = window.open('', 'popupnav', 'width=500,height=500,resizable=0,scrollbars=auto'); // width=500,height=500為窗口長和寬 
if (popup != null) { 
if (popup.opener == null) { 
popup.opener = self; } 
popup.location.href = '要打開的文件名'; 
} 
// --> 
</script>

方法二:Cookies應用：控制彈出窗口 當我們在一個頁面中設置一個POP彈出窗口后，每次只要重新瀏覽該頁面，POP窗口就會自動彈出來，造成不必要的麻煩。那么怎么解決這個問題呢？ 我在這里用一個簡單的例子講解一下如何通過操作Cookies讓彈出窗口只在第一次瀏覽該頁面時彈出，以后就不再招人煩了！? 
<script>?
function openpopwindow() {?
  window.open("hello.htm","","width=200,height=200" //自己修改彈出窗口?
}?
function get_cookie(Name) {?
  var search = Name + "=";?
  var returnvalue = "";?
  if (documents.cookie.length > 0) {?
    offset = documents.cookie.indexOf(search);?
    if (offset != -1) { // 如果以前有cookies記錄?
        offset += search.length; // 設置cookie的起始位置?
        end = documents.cookie.indexOf(";", offset); // 設置cookie的結束位置?
        if (end == -1) end = documents.cookie.length;?
        returnvalue=unescape(documents.cookie.substring(offset, end))?
    }?
  }?
  return returnvalue;?
}?


function loadpopup() {?
  if (get_cookie('popped')=='') {?
    openpopwindow(); documents.cookie="popped=yes";?
  }?
}?


</script>

將上面的代碼鍵入BODY區： <body > //離開頁面的時候彈出?
或者： <body > //打開頁面的時候彈出?

離開頁面時彈開窗口效果:?
效果：別人關閉這個頁面的時候，彈出一個窗口，你可以寫一些祝福的話? 
<script LANGUAGE="javascript"> 
<!--Begin function leave(){ 
window.open 
('1.htm',",'toolbar=no,menubar=no,location=no,height=225,width=235'); 
break 
} 
//END--> 
</script>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/276052.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/276052.shtml
英文地址，請注明出處：http://en.pswp.cn/news/276052.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

跟各位讀者朋友分享下公眾號運營策略

跟各位讀者朋友分享下公眾號運營策略

大家好&#xff0c;我是若川。歡迎加我微信 ruochuan12&#xff0c;加群交流學習。目前我的公眾號運營策略&#xff0c;分享給各位讀者朋友。點擊下方卡片關注我&#xff0c;或者查看源碼等系列文章。可能大多數關注的人不知道&#xff0c;我的公眾號取名為若川視野的原因。「若…
閱讀更多...
[轉載]用PHP的ob_start();控制您的瀏覽器cache!

[轉載]用PHP的ob_start();控制您的瀏覽器cache!

FROM http://www.phpchina.com/html/28/1628-3870.html Output Control 函數可以讓你自由控制腳本中數據的輸出。它非常地有用&#xff0c;特別是對于&#xff1a;當你想在數據已經輸出后&#xff0c;再輸出文件頭的情況。輸出控制函數不對使用 header() 或 setcookie(), 發送的…
閱讀更多...
oracle 帶有變量的語句_【成都校區】Oracle SQL語句之常見優化方法總結

oracle 帶有變量的語句_【成都校區】Oracle SQL語句之常見優化方法總結

本帖出自于黑馬程序員成都中心&#xff0c;更多資源可關注微信公眾號1、SQL語句盡量用大寫的&#xff1b;因為oracle總是先解析SQL語句&#xff0c;把小寫的字母轉換成大寫的再執行。2、使用表的別名&#xff1a; 當在SQL語句中連接多個表時, 盡量使用表的別名并把別名前綴于每…
閱讀更多...
js 獲取上下文后面的路徑_通過在數據后面顯示上下文來可視化公眾意見

js 獲取上下文后面的路徑_通過在數據后面顯示上下文來可視化公眾意見

js 獲取上下文后面的路徑In 1824, The Harrisburg Pennsylvanian, a newspaper from a town in Pennsylvania conducted the first known public opinion polls in history, and successfully predicted the result of the vote in the close race between Andrew Jackson and …
閱讀更多...
甘肅甘南步班郵遞員：草原上的“遞愛”艱途

甘肅甘南步班郵遞員：草原上的“遞愛”艱途

圖為甘肅甘南藏族自治州碌曲縣郎木寺鎮郵政支局的投遞員進行投遞工作。&#xff08;資料圖&#xff09; 鐘欣 攝 中新網蘭州1月25日電 (吳玉蒿)漸近春節&#xff0c;劉權英投遞郵件的工作愈加繁重。現年45歲的劉權英是甘肅甘南藏族自治州碌曲縣郎木寺鎮郵政支局的一名投遞員。由…
閱讀更多...
核心編程6——線程

核心編程6——線程

Note 0:了進程實際是由兩個組件組成的:一個進程內核對象和一個地址空間.類似地,線程也由兩個組件組成:一個是線程的內核對象,操作系統用它管理線程.內核對象還是系統用來存放線程統計信息的地方.一個線程堆棧,用于維護線程執行時所需的所有函數參數和局部變量.Note 1:進程是有惰…
閱讀更多...
PHP解決搶購、秒殺、搶樓、抽獎等阻塞式高并發庫存防控超量的思路方法

PHP解決搶購、秒殺、搶樓、抽獎等阻塞式高并發庫存防控超量的思路方法

轉載鏈接&#xff1a;http://www.4u4v.net/thinking-approach-to-buy-spike-grab-floor-sweepstakes-and-other-high-concurrent-blocking-prevention-excess-inventory-solve-php.html 如今在電商行業里,秒殺搶購活動已經是商家常用促銷手段。但是庫存數量有限&#xff0c;而同…
閱讀更多...
看了就會的 Node.js 三大基礎模塊常用 API

看了就會的 Node.js 三大基礎模塊常用 API

大家好&#xff0c;我是若川。歡迎加我微信 ruochuan12&#xff0c;加群交流學習。今天分享一篇nodejs基礎的文章。點擊下方卡片關注我&#xff0c;或者查看源碼等系列文章。在日常使用 Node 進行開發的時候&#xff0c;會使用到一些文件系統、路徑操作等基礎 API&#xff0c;這…
閱讀更多...
vue-cli3插件初體驗

vue-cli3插件初體驗

vue-cli3發布自2018年8月&#xff0c;距離現在還不是特別久&#xff0c;最好搭建項目剛好用到&#xff0c;所以寫下這篇文章&#xff0c;記錄一下踩坑經歷。vue的作者說過&#xff0c;vue-cli的本質是模版的拉取&#xff0c;太多的配置導致了模版的難以維護&#xff0c;所以重構…
閱讀更多...
ios設計登錄功能_親愛的產品設計師，這是iOS 14的新功能

ios設計登錄功能_親愛的產品設計師，這是iOS 14的新功能

ios設計登錄功能On June 22, 2020 Apple previewed iOS 14 for the first time. As always there are quite some changes you should know about as a product designer like widgets, pickers, app clips, permissions and more.2020年6月22日&#xff0c;Apple首次預覽iOS 1…
閱讀更多...
c++ int 轉 short_C/C++結構體內存對齊

c++ int 轉 short_C/C++結構體內存對齊

在面試或工作中&#xff0c;經常會遇到內存對齊的問題。這里結合我的理解談一談對內存對齊的理解。1. 為什么要內存對齊&#xff0c;不對齊會怎么樣&#xff1f;內存中存放數據是為了給CPU使用&#xff0c;CPU訪問內存數據時會受到地址總線寬度的限制&#xff0c;也就是一次能從…
閱讀更多...
對于日訪問量達到1W IP的處理方法

對于日訪問量達到1W IP的處理方法

轉自&#xff1a;http://www.java123.net/56026-2.html 對于日訪問量達到1W IP的處理方法 一、1萬ip真是不高&#xff1a; 1.常用數據用緩存&#xff0c;減輕數據庫壓力。 2.詳細頁數據生成靜態頁面。 二、10000算是相當小的了,不需要什么特殊的處理機制,只要符合最一般的…
閱讀更多...
數據契約（DataContract）

數據契約（DataContract）

WCF第一要素就是契約: 服務契約用于聲明可用于遠程訪問的類型。在Interface或class開始處使用服務契約標簽. [ServiceContract] Public interface Iservice { } 接口調用契約的好處: 1. 同一服務類型可以實現多個不相干的服務契約. 2. 有利于版本升級 3. 按照…
閱讀更多...
jakob slam_Jakob Nielsen針對用戶界面設計的第二種可用性啟發法

jakob slam_Jakob Nielsen針對用戶界面設計的第二種可用性啟發法

jakob slamIn the pursuit of providing great user experiences, it’s imperative that digital products are evaluated. A 為了提供出色的用戶體驗&#xff0c;必須對數字產品進行評估。 一個 heuristic evaluation is essential to delivering great user experiences. I…
閱讀更多...
微軟Office 365正式上架Mac App Store

微軟Office 365正式上架Mac App Store

今天&#xff0c;Office 365正式在Mac App Store上架&#xff0c;Mac用戶可以輕松下載Word&#xff0c;Outlook&#xff0c;Excel&#xff0c;PowerPoint&#xff0c;OneNote以及整套微軟的熱門應用程序。用戶還可以從應用程序內訂購Office 365。蘋果全球開發者關系高級主管Sha…
閱讀更多...
一文搞懂瀏覽器原理

一文搞懂瀏覽器原理

大家好&#xff0c;我是若川。最近這幾年&#xff0c;云計算的普及和 HTML5 技術的快速發展&#xff0c;越來越多的應用轉向了瀏覽器 / 服務器&#xff08;B/S&#xff09;架構&#xff0c;這種改變讓瀏覽器的重要性與日俱增&#xff0c;視頻、音頻、游戲幾大核心場景也都在逐漸…
閱讀更多...
python處理excel可視化_python如何將excel數據處理可視化

python處理excel可視化_python如何將excel數據處理可視化

python將excel數據處理可視化的方法&#xff1a;首先安裝xlrd與xlwt庫&#xff0c;進行表格讀取&#xff1b;然后使用pyecharts生成Echarts圖表的類庫&#xff1b;最后安裝Echarts讀取Excel數據及顯示即可。python將excel數據處理可視化的方法&#xff1a;Excel表操作python操作…
閱讀更多...
dataframe中將一列數據切分成多列

dataframe中將一列數據切分成多列

為什么80%的碼農都做不了架構師&#xff1f;>>> 原sheet中數據 目的 將【備注】列切分成【key】列和【value】列 Python sheet[key] sheet[備注].str.extract(r(_.*(?\u503c))) sheet[value] sheet[備注].str.extract(r((?<).*))結果 參考 pandas.Series.st…
閱讀更多...
matplotlib可視化_EDA：Geopandas，Matplotlib和Bokeh中的可視化

matplotlib可視化_EDA：Geopandas，Matplotlib和Bokeh中的可視化

matplotlib可視化Nowadays, everyone is immersed with plenty of data from news sources, cellphones, laptops, workplaces, and so on. Data conveys with tons of information from different data variables like date, string, numeric, and geographical format. How t…
閱讀更多...
(轉)結婚那天，媽問我：坐在角落里象兩個要飯模樣的人是誰?

(轉)結婚那天，媽問我：坐在角落里象兩個要飯模樣的人是誰?

人人看到的文章 很感人~~~~結婚那天&#xff0c;媽問我&#xff1a;坐在角落里象兩個要飯模樣的人是誰&#xff1f; 我看過去的時候&#xff0c;有個老頭正盯著我&#xff0c;旁邊還有個老太太&#xff0c;發現我看著他們時趕忙低下頭。我不認識他們但也不象要飯的&#xff0c;…
閱讀更多...
最新文章

Copyright @ 2022~2023