W3.CSS可用于显示可自定义的模式对话框,而不是标准的JavaScript警报.
它使用w3-row和w3-col样式类来定义行和列分别.
锶.不. | 类名&描述 |
---|---|
1 | 模态对话框 表示定义对话框的主要父窗口. |
2 | w3-modal-dialog 表示对话框内容容器. |
3 | w3-modal-content 表示对话框内容. |
<html> <head> <title>The W3.CSS Modal dialog</title> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css"> </head> <body class = "w3-container"> <h2>Modal dialog Demo</h2> <a class = "w3-btn w3-teal" href = "#model-dialog">Open a Modal dialog</a> <div id = "model-dialog" class = "w3-modal"> <div class = "w3-modal-dialog"> <div class = "w3-modal-content w3-card-8"> <header class = "w3-container w3-teal"> <a href = "#" class = "w3-closebtn">×</a> <h2>TutorialsPoint</h2> </header> <div class = "w3-container"> <p>Hello World!</p> </div> <footer class = "w3-container w3-teal"> <p>@TutorialsPoint.COM</p> </footer> </div> </div> </div> </body> </html>
验证结果.