搜尋

confirm() 彈出確認視窗

當網頁執行 JavaScript 的 confirm() 方法時,網頁就會彈出讓使用者選擇「確認」或「取消」的視窗,同時會根據使用者的選擇,進行接下來的動作,這篇教學會介紹兩種呼叫 confirm() 開啟確認視窗的方法。

onclick 撰寫行內 JavaScript

在「HTML 元素屬性」教學裡,有介紹元素的「onclick」屬性 ( 點擊元素時觸 ),只要在 onclick 屬性裡撰寫行內的 JavaScript,點擊元素就會執行 confirm() 方法,開啟確認視窗,確認視窗的樣式使用各個作業系統的預設樣式,confirm() 基本寫法如下:

confirm('提示文字');

以下面的網頁程式碼為例,不論點擊 button 按鈕或是 h2 標題,都會彈出確認視窗,並顯示說明文字。

<button onclick="confirm('你是男生嗎?')">開啟警告視窗</button>
<h2 onclick="confirm('你是男生嗎?');">開啟警告視窗</h2>

通常使用 confirm() 會再額外搭配其他的程式,根據使用者的選擇進行對應的動作,因此可以將上述的程式碼添加「條件 ( 三元 ) 運算子」,如果選擇「確認」,會執行 ? 後方的結果,如果選擇「取消」,則會執行 : 後方的結果

<button onclick="confirm('你是男生嗎?') ? alert('男生') : alert('女生');">開啟確認視窗</button>
<h2 onclick="confirm('你是男生嗎?') ? alert('男生') : alert('女生');">開啟確認視窗</h2>

HTML 教學 - confirm() 彈出確認視窗 - onclick 撰寫行內 JavaScript

onclick 搭配外部 JavaScript

使用 confirm 的方法比較適合搭配外部 JavaScript 撰寫函式,透過 onclick 指定要執行的 JavaScript 函式,就能實現同樣的效果。

<button onclick="myFunction();">開啟確認視窗</button>
<h2 onclick="myFunction();">開啟確認視窗</h2>

<script>
  var myFunction = function(){
    let answer = confirm('你是男生嗎?');
    if(answer){
      alert('男生');
    }else{
      alert('女生');
    }
  }
</script>

HTML 教學 - confirm() 彈出確認視窗 - onclick 搭配外部 JavaScript

其他開啟彈出視窗的方法

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

HTML 教學

基本介紹

認識 HTML 使用 HTML 編輯器

基礎知識

HTML 標籤與架構 HTML 格式規範 HTML 縮排與註解 HTML 元素顯示類型 HTML 元素屬性 HTML 特殊字元 HTML 色彩表示法 HTML 尺寸單位 HTML 網址與路徑 HTML 套用 CSS 樣式 HTML 套用 JavaScript 如何觀察 HTML 原始碼

網頁資訊元素

網頁標題 <title> 網頁資訊 <meta> 載入外部資源 <link> 重設根目錄 <base>

常用元素

標題 <h1>~<h6> 段落 <p> 行內容器 <span> 區塊容器 <div> 超連結 <a> 圖片 <img> 換行 <br> 水平分隔線 <hr> 內嵌頁框 <iframe>

文字樣式元素

粗體字 <strong><b> 斜體字 <em><i> 刪除線文字 <del> 插入 ( 底線 ) 文字 <ins> 小型文字 <small> 上標下標 <sup><sub> 凸顯文字 <mark> 引用 <blockquote><q> 預先格式化 <pre> 程式碼內容 <code> 收折文字內容 <details> 標示注音 <ruby><rt> 標示聯絡方式 <address> 標示鍵盤按鍵 <kbd> 標示時間日期 <time> 標示縮寫 <abbr> 標示可換行位置 <wbr>

表格&清單元素

無序清單 <ul><li> 有序清單 <ol><li> 自訂清單 <dl><dt><dd> 表格 <table><tr><td> 表格 <th><caption> 表格 <thead><tbody> 表格 <colgroup><col>

表單元素

表單 <form> 輸入 <input> 按鈕 <button> 多行文字輸入 <textarea> 下拉選單 <select> 進度條 <progress> 欄位標題 <label> 欄位資料清單 <datalist> 表單元素分組 <fieldset>

語意結構元素

頁首區塊 <header> 主要區塊 <main> 章節區塊 <section> 文章區塊 <article> 側邊欄區塊 <aside> 引用區塊 <figure> 導航連結區塊 <nav> 頁尾區塊 <footer>

影音&圖形元素

播放影片 <video> 播放聲音 <audio> 響應式圖片 <picture> 點陣畫布 <canvas> 向量圖形 <svg>

彈出視窗

alert() 警告視窗 confirm() 確認視窗 prompt() 輸入視窗

網頁嵌入應用

嵌入 YouTube 影片 嵌入 Google 地圖 嵌入 Google 日曆 嵌入 Google 表單 嵌入 Google 簡報 嵌入 Google 文件 嵌入 Google 試算表 嵌入 Google 試算表圖表 嵌入 Twitter 推文 嵌入 Facebook 粉絲團 嵌入 Facebook 影片 嵌入 Canva 簡報 嵌入 Scratch 創作