1. 程式人生 > >JS彈窗效果的實現

JS彈窗效果的實現

第一種:

//關閉,父視窗彈出對話方塊,子視窗直接關閉

echo "<script language=javascript>window.close();</script>";

//關閉,父視窗和子視窗都不彈出對話方塊,直接關閉

echo "<script>";

echo "{top.opener =null;top.close();}";

echo "</script>";

步驟/方法

1

//彈出視窗重新整理當前頁面width=200 height=200選單。選單欄,工具條,位址列,狀態列全沒

echo "<script language=javascript>window.open('rows.php','newwindow','width=200,height=200')</script>";

2

//彈出視窗重新整理當前頁面

echo "<script language=javascript>window.open('rows.php')</script>";

echo "<script>window.open('form.php','_blank');</script>";

3

//彈出提示視窗跳到form.php頁(在一個IE視窗中)

echo " <script language=javascript>alert('註冊成功');window.window.location.href='form.php';</script> ";

4

//關閉當前子視窗,重新整理父視窗

echo "<script>window.opener.location.href=window.opener.location.href;window.close();</script>";

echo "<script>window.opener.location.replace(window.opener.document.referrer);window.close();</script>";

5

//子視窗重新整理父視窗

echo "<script>window.opener.location.href=window.opener.location.href;</script>";

echo "<script>window.opener.location.href='WebForm1.php';</script>";

6

//彈出提示視窗.確定後彈出子視窗(form.php)

echo "<script language='javascript'>alert('發表成功!');window.open('form.php')</script>";

第二種:

彈出框:

代替window.open、window.alert、window.confirm;提供良好的使用者體驗;

水晶質感,設計細膩,外觀漂亮;

相容ie6/7/8、firefox2/3、Opera;彈出框在ie6下不會被select控制元件穿透;

無外部css檔案,引用Dialog.js即可使用;

對iframe下的應用作了充分考慮,適合複雜的系統應用;

Dialog顯示的內容(三種):1、指向一個URL的iframe視窗;2、頁面內隱藏的元素中的html內容;3、直接輸出一段html內容;

按ESC鍵可關閉彈出框;

主調函式引數說明:

Dialog.open({ID,Title,URL,InnerHtml,InvokeElementId,Width,Height,Top,Left,Drag,OKEvent,ShowButtonRow,MessageTitle,Message,AutoClose,OnLoad})

ID:視窗id號,可省略。每個視窗的id必須是唯一的不能重複。

Title:視窗標題。如不寫此項預設值為""。

URL: 視窗內容頁地址,或使用相對路徑或絕對路徑,注意如果使用

http://www.csdn.net

形式的絕對地址,則http://不能省略。

InnerHtml: 視窗內容html程式碼,用於直接輸出html內容,注意不要讓生成的內容因為不適當的寬度或定位方式而破壞了Dialog的外觀。

InvokeElementId: 本頁面內隱藏的元素的id,用於顯示頁面內隱藏的元素中的html內容,注意不要讓內容因為不適當的寬度或定位方式而破壞了Dialog的外觀。

Width:視窗寬度(dialog內容區寬度),值為數值型,預設值為視窗可見寬的40%。

Height:視窗高度(dialog內容區高度),值為數值型,預設值為視窗可見寬的20%。

Left:視窗距瀏覽器左邊距離,值為數值型或字串型(當使用百分比時為字串型),如Left:"0%",Top:"0%"為左上,Left:"50%",Top:"50%"為居中,Left:"100%",Top:"100%"為右下。

Top:視窗距瀏覽器頂端距離,值為數值型或字串型(百分比)。

Drag:是否允許拖動視窗,值為布林型(true|false),預設值為true,注意需要頁面引用了Drag.js。

OKEvent:點選確定按鈕後執行的函式。

CancelEvent:點選取消按鈕或點選關閉按鈕後執行的函式,預設為關閉本Dialog。

ShowButtonRow:是否不顯示按鈕欄,值為布林型(true|false),預設值為false,當定義了OKEvent或呼叫了addButton時自動設為true。

MessageTitle,Message:自定義的視窗說明欄中的小標題和說明。

ShowMessageRow:是否顯示視窗說明欄,值為布林型(true|false),預設值為false,當定義了MessageTitle或Message時自動設為true。

AutoClose:是否自行關閉,值為數值型,預設值為false。

OnLoad:視窗內容載入完成後執行的程式,值為函式型。