導航:首頁 > 萬維百科 > js網頁彈窗設計

js網頁彈窗設計

發布時間:2020-10-08 02:38:29

1、網頁製作中,如何實現彈出窗口,高分!

在這個網站有很多的http://www.xgdown.com/article/78/ArticleList78_14.htm

你慢慢看吧

在設計網站的時候,在網站有重大的變動,或者需要作什麼聲明的時候,我們就要用到彈出窗口,這時只要我們一進入這個頁面,就會彈出一個窗口,其實要製作這樣的彈出窗口真的非常的容易,只要在該頁面的HTML代碼里加入一段javascript代碼即可實現了。我們就來看看這最簡單的彈出窗口:
把下面的這一段代碼可以加入HTML文件的<head>和</head>之間或者<body>間</body>就行的了,越在前面越早執行的喲!

<SCRIPT LANGUAGE="javascript"> //*javascript腳本的開始標簽,千萬要記得啊
<!-- //*使不支持javascript的瀏覽器瀏覽時也不至於出錯
window.open ('pop1.html') //*這就是關鍵,pop1.html就是你彈出窗口的內容
-->
</SCRIPT>

這里只需要注意這樣一點就行的了:window.open ('pop1.html') 用於控制彈出窗口pop1.html,如果pop1.html不與主窗口文件在同一路徑下,你應該在前面指明路徑,絕對路徑(http://)和相對路徑(../)都可以的。裡面用單引號和雙引號都可以,只是你千萬別混用,一會用單引號,而一會用雙引號。

上面我們實現的是最基本的彈出窗口,我們的起步,我們現在再來看一個稍微復雜點的彈出窗口,你只要對上面的代碼作小小的改動就行的了!這樣我們就能定製彈出窗口的外觀,尺寸大小,彈出的位置以適應該頁面的具體情況和文字的多少。

<SCRIPT LANGUAGE="javascript">
<!--
window.open ('pop2.html', 'popwindow', 'height=200, width=320, top=0, left=24, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')
//*上面的代碼要寫在一行上面'popwindow' 彈出窗口的標題名字;height=200 彈出窗口高度;width=320 彈出窗口寬度;top=0 彈出窗口距離屏幕上方的象素值;left=24 窗口距離屏幕左側的象素值;toolbar=no 彈出窗口是否顯示工具欄,yes為顯示;menubar,scrollbars 控制彈出窗口的菜單欄和滾動欄的顯示。resizable=no 是否允許改變彈出窗口大小,yes為允許;location=no 彈出窗口是否顯示地址欄,yes為允許;status=no 是否顯示狀態欄內的信息(通常是文件已經打開),yes為允許;
-->
</SCRIPT>

但是我們看到,這樣的彈出窗口實在太簡單的了,你基本上不能對他進行什麼樣的控制和設置,我們需要的是能滿足我們的需要的彈出窗口(現代人是要求越來越高的了),那我們就用下面這個腳本來實現,你不但可以定製窗口大小,你還可以根據自己的需要改成你自己的說明的,這樣的歡迎窗口一定讓你的主頁更酷。
將如下代碼加入HTML代碼的<HEAD>和</HEAD>之間:

<script language="javascript">
<!--
var gt = unescape('%3e');
var popup = null;
var over = "Launch Pop-up Navigator";
popup = window.open(', 'popupnav', 'width=200,height=170,resizable=1,scrollbars=auto');/*width和height是窗口的大小,你可以根據自己的需要進行調整,而resizable是控制窗口大小是否根據文字多少變化,值為0就固定了,為1可以變化,scrollbars是控制滾動條的)
if (popup != null) {
if (popup.opener == null) {
popup.opener = self;
}
popup.location.href = '說明窗口內容文件.html';/*popup.location.href = '用於說明窗口內容.htm',用於設置窗口中出現的內容的文件名。
}
// -->
</script>

有時為了需要我們可以同時彈出兩個窗口,這實現難嗎?其實也不難,如果你理解了上面的,那簡直就易如反掌了,來看看吧,你只要對上面的代碼稍微改動一下就可以的了:

<script LANGUAGE="javascript">
<!--
window.open ("pop1.html", "popwindow1", "height=100, width=120, top=0, left=24,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
window.open ("pop2.html", "popwindow2", "height=100, width=200, top=100, left=144,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
//-->
</script>

在這里,我們為了避免彈出的2個窗口覆蓋,用top和left控制一下彈出的位置不要相互覆蓋就可以的了。

有了上面這些, 我想你要做出很酷很好的彈出窗口已經很容易的了,但是我們發現在你訪問一個站點的時候,如果經常出現彈出窗口(每刷新一次就出現),我們就會覺得很煩的,這里我們看看對彈出窗口的一些優化處理:

第一招,我們給彈出窗口加個「關閉窗口「按紐
只要加上這段代碼就行的了:
<FORM>
<INPUT TYPE='BUTTON' VALUE='關閉' onClick='window.close()'>
</FORM>

第二招:讓彈出窗口自己定時關閉
首先,將如下代碼加入pop1.html文件的<head>和</head>之間:

<script language="javascript">
<!--
function closeit() {
setTimeout("self.close()",100000) //單位是毫秒,這里是100秒
</script>

然後,再用<body onload="closeit()"> 這一句話代替pop1.html中原有的<BODY>這一句就可以了。這樣100秒鍾後彈出窗口就會自行關閉

第三招:控制你的彈出窗口只彈出一次(如果每進一次,刷新一次就彈出你不覺得很煩和麻煩嗎?)有什麼好的辦法嗎?
那是當然的啊,我們現在只要使用cookie來控制就能實現這樣的要求了。
首先,你需把將如下代碼加入到頁面HTML的<HEAD>和</HEAD>之間:

<script>
function openwin(){
window.open("pop1.html","","width=120,height=240")
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (documents.cookie.length > 0) {
offset = documents.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = documents.cookie.indexOf(";", offset);
if (end == -1)
end = documents.cookie.length;
returnvalue=unescape(documents.cookie.substring(offset, end))
}
}
return returnvalue;
}
function loadpopup(){ //*控制彈出窗口的函數喲,你要使用他的啊
if (get_cookie('popped')=='){
openwin()
documents.cookie="popped=yes"
}
}
//-->
</script>

然後,用<body onload="loadpopup()">替換頁面中原來的<BODY>這一句就行的了。這樣你的彈出窗口就只彈出一次了,既使大家了解了你的信息,也不會覺得煩的。最後祝大家做出你滿意的效果來,到時別忘記了叫我來看看啊!

2、網頁設計用javascript實現彈出對話框的一個示例

看你想怎麼樣了,只是彈出一個對話框提示消息的話,就用alert(msg),msg 是提示信息 ;
confirm 也是彈出一個對話框,但是它彈出的一個包含"確定"與"取消"的對話方塊. 如果用戶按下了確定,返回true;或者按下了取消,返回false
示例如
<body>
<script type="text/javascript">
alert("這是彈出框")
confirm("你今天開心嗎")
</script>
</body>
</html>

與js網頁彈窗設計相關的知識