HTML 彈出框是一種常見的網頁設計元素,可以讓用戶在瀏覽網頁時從彈出框中獲得一些額外的信息或任務操作。以下是一段簡單的 HTML 彈出框代碼:
<button onclick="document.getElementById('myModal').style.display='block'">打開彈出框</button> <div id="myModal" class="modal"> <div class="modal-content"> <span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span> <p>這是一個彈出框的示例。</p> </div> </div>
以上代碼包含一個按鈕和一個彈出框。當用戶點擊按鈕時,彈出框會顯示在頁面上。彈出框包含一個單獨的 div 元素,其中包含一個 class 為 modal 的 CSS 樣式表。這個樣式表定義了彈出框的基本樣式和屬性,例如彈出框的寬度、高度和背景顏色。
在 div 元素的內部,又包含了一個 class 為 modal-content 的子元素 div。這個 div 包含了彈出框的實際內容,例如文本、圖片或表單元素等。在這個示例代碼中,我們只是簡單地在 modal-content 元素中放置了一個 span 元素,以便用戶可以通過單擊它來關閉彈出框。
最后,我們需要添加一些 JavaScript 代碼來控制彈出框的顯示和隱藏。在按鈕中使用 onclick 事件調用函數 document.getElementById('myModal').style.display='block' 來顯示彈出框。同樣地,在 span 元素上使用 onclick 事件調用函數 document.getElementById('myModal').style.display='none' 來隱藏彈出框。
下一篇python 貝葉斯庫