DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 想彈就彈 隨心所欲定制頁面彈出窗口
想彈就彈 隨心所欲定制頁面彈出窗口
編輯:關於網頁技巧     

  想彈就彈 隨心所欲定制頁面"彈出窗口"——新版網頁陶吧上線了,點擊這裡進入新版網頁陶吧……

  常泡在網上的朋友對“彈出窗口”一定不會陌生,像新浪、163等網站,一進入首頁立刻就會彈出一個窗口,裡面通常是一些告示信息,或者FLASH廣告等等。其實這樣的效果很容易實現,大家隨我一起動手吧!

  不加修飾的彈出窗口

  將下面這段代碼插入你的頁面中,在頁面加載時就會自動彈出一個窗口,並打開Google搜索引擎,是不是很簡單啊!

  將代碼放置在〈!—XXX --〉中間是為了兼容較低版本浏覽器的需要,在低版本的浏覽器中標簽內的內容將被視作注視。

  打開的頁面使用絕對路徑(http://)或相對路徑(../page.htm)都可以。

  示例代碼1:

  〈SCRIPT LANGUAGE="JavaScript"〉
  〈!--
  window.open(/'http://www.google.com/');
  //--〉
  〈/SCRIPT〉

  修飾彈出窗口

  使用下面這段代碼,我們可以對彈出窗口做更多的控制,包括窗口大小、窗口位置、是否帶工具欄、是否可以改變大小等等。

  示例代碼2:

  〈script language="JavaScript1.2" type="text/JavaScript1.2"〉
  var popUpWin=0;
  function popUpWindow()
  {
  //判斷該窗口(popUpWin)是否已經存在,如果已經存在,則先關閉窗口,然後再打開新窗口
  if(popUpWin)
  {
  if(!popUpWin.closed) popUpWin.close();
  }
  //根據參數定位彈出窗口的展示位置
  popUpWin = window.open(‘page.htm’, /'popUpWin/', /'toolbar=no,location=no,
  directories=no,status=no,menub ar=no,scrollbar=no,resizable=no,copyhistory=yes,width=100,height=100,
  left=100,top=100,screenX=100,screenY=100’);
  }
  〈/script〉

  彈出窗口參數一覽

  彈出窗口的命令格式:“window.open(‘URLStr’, ‘WindowName’, ‘Property’);”,其中:

  1.window.open命令用於在網頁上彈出一個新窗口。

  2.URLStr:彈出窗口所顯示的頁面

  3.WindowName:彈出窗口的名稱,可以任意指定,也可以用’’來代替

  4.Property:用於控制彈出窗口顯示的屬性,具體可控制的參數有:

  5.Toolbar:是否顯示浏覽器工具欄,yes為顯示,no為不顯示

  6.Location:是否顯示游覽器地址欄,yes為顯示,no為不顯示

  7.Directories:是否顯示目錄按鈕,yes為顯示,no為不顯示

  8.Status:是否顯示狀態欄,yes為顯示,no為不顯示

  9.Menubar:是否顯示菜單條,yes為顯示,no為不顯示

  10.Scrollbar:是否激活水平和垂直流動條,yes為顯示,no為不顯示

  11.Resizable:是否可以改變窗口大小,yes為顯示,no為不顯示

  12.Width:指定窗口的寬度,以像素為單位

  13.Height:指定窗口的高度,以像素為單位

  14.Left:指定窗口距屏幕左端的距離,以像素為單位

  15.Top:指定窗口距屏幕頂端的距離,以像素為單位

  16.screenX:等同於Left屬性

  17.screenY:等同於Top屬性

  特效窗口示例

  了解了窗口屬性的定義,我們一起來看一些特殊應用,原來還真有些學問在裡面。

  通過函數調用控制彈出窗口

  如“示例代碼2”所定義的彈出窗口,在沒有調用popUpWindow方法之前,該窗口是不會自動彈出的,下面我們來看幾種常用的調用方法:

  頁面加載時自動彈出窗口

〈body onLoad=”javascript:popUpWindow();”〉

  頁面關閉時自動彈出窗口

〈body onUnLoad=”javascript:popUpWindow();”〉

  通過鏈接或者按鈕觸發彈出窗口

  〈a href=”#” onClick=” javascript:popUpWindow();”〉
  〈input type=”button” name=”彈出窗口” onClick=” javascript:popUpWindow();”〉

  彈出窗口定時關閉

  在彈出的窗口中加入下面一小段代碼,彈出的窗口就會在20秒後自動關閉。(這段代碼要加在彈出窗口中,而不是主頁上)

  〈script language="javascript"〉
  function closeit()
  {
  setTimeout("self.close()",10000) //毫秒
  }
  〈/script〉

  將這段代碼加入〈head〉標簽內,然後再修改〈body〉標簽為〈body onLoad=”closeit()”〉就可以了。

  為彈出窗口加上一個關閉按鈕

  在彈出的窗口中加入下面代碼,頁面上會多出一個按鈕,單擊這個按鈕,彈出窗口會自動關閉,而不會有任何提示。

〈INPUT TYPE=/'BUTTON/' VALUE=/'關閉/' onClick=/'window.close()/'〉

  小結

  了解的彈出窗口的屬性,發揮你的想象,就可以創造出更酷效果的彈出窗口了。

  想彈就彈 隨心所欲定制頁面"彈出窗口"——新版網頁陶吧上線了,點擊這裡進入新版網頁陶吧……


  

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved