如何用JavaScript創(chuàng)建彈出窗口

擊右上方紅色按鈕關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！

大家好！我是/小鄭搞碼事/的小鄭

今天和大家分享一下JS如何操作瀏覽器窗口。只講如何打開一個新窗口

先來看效果圖

上面這個圖界面效果就是我們要實現(xiàn)的。

我們常常需要創(chuàng)建一個新窗口，用來向用戶顯示額外的信息，同時又避免他們正在閱讀的信息消失。從實現(xiàn)方案上來看，盡管我們可以用HTML打開一個新的瀏覽器窗口，但是使用JavaScript可以對新窗口的內容和特性進行更多的控制。

接下來，我們看一下怎么實現(xiàn)的

一、定義窗口打開函數(shù)

定義一個打開新窗口的函數(shù)newWindow。如上面代碼所示，變量catWindow包含一個新的窗口對象，這個對象引用圖像文件icon.png，這個新窗口的名稱是catWin，必須設置名稱，因為我們以后可能希望在a或另一個腳本中引用這個窗口。新窗口的寬度是350像素，高度是260像素，位置是左邊400，上邊400。

二、寫一個調用函數(shù)

頁面中，包含一個onload事件處理程序，它調用newWinLinks函數(shù)，newWinLinks循環(huán)遍歷頁面上的a，檢查是否有任何a包含class屬性值newWin。如果有，就設置這個a元素的onclick事件處理程序，從而，當點擊這個a時，調用newWindow函數(shù)。

總結一下

需要注意兩個地方：

1、newWindow中，在寬度和高度參數(shù)中的逗號之間不能有任何空格，如果有空格，那么腳本可能在某些瀏覽器中無效，總地來說，當腳本出現(xiàn)錯誤，需要進行高度時，要首先查找這樣的小問題。

2、比如向窗口中添加參數(shù)時，希望窗口具有工具欄，地址欄，滾動條

toolbar=yes,location=yes,scrollbars=yes

參數(shù)默認是no，可以不填。當然瀏覽器上表現(xiàn)也有不同，需要知道。

、警告框（alert / window.alert）

alert("文本");

警告框經常用于確保用戶可以得到某些信息。

當警告框出現(xiàn)后，用戶需要點擊確定按鈕才能繼續(xù)進行操作。

2、確認框（confirm / window.confirm）

confirm("文本")

確認框用于使用戶可以驗證或者接受某些信息。

當確認框出現(xiàn)后，用戶需要點擊確定或者取消按鈕才能繼續(xù)進行操作。

如果用戶點擊確認，那么返回值為 true。如果用戶點擊取消，那么返回值為 false。

prompt（text，defaulText）；輸入文字對話框，text：對話框顯示純文本（而不是HTML格式文本）；defaultText，默認文本。

3、提示框（prompt / window.prompt）

prompt("文本","默認值")

提示框經常用于提示用戶在進入頁面前輸入某個值。

當提示框出現(xiàn)后，用戶需要輸入某個值，然后點擊確認或取消按鈕才能繼續(xù)操縱。

如果用戶點擊確認，那么返回值為輸入的值。如果用戶點擊取消，那么返回值為 null。

注：彈出框換行用“ /n ”;

4、console.log();控制臺打印內容；

家好，今天給大家介紹一款，css實現(xiàn)的圖片懸停旋轉彈出文本框html頁面前端源碼（圖1）。送給大家哦，獲取方式在本文末尾。

圖1

當鼠標經過圖片的時候，就會激活旋轉和文本彈出事件，非常適合用在圖片展示的功能中（圖2）

圖2

源碼完整，需要的朋友可以下載學習（圖3）

圖3

本源碼編碼：20241，需要的朋友，訪問下面鏈接后，搜索20241，即可獲取。

「鏈接」

在線咨詢

上一篇：CSS3動畫難嗎？從簡易的天氣動態(tài)圖標學習CSS3，
下一篇：JavaScript位運算及其妙用

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商