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:視窗內容載入完成後執行的程式,值為函式型。