主机频道
Ubuntu 允许您使用 HTML、CSS 和 JavaScript 自定义对话框样式。
- 首先，创建一个 HTML 文件。 例如，输入
custom-dialog.html并在其中添加以下内容。
<!DOCTYPE html>
<html lang="en">
<头部>
<元 字符集="UTF-8">
<元 名称="视口" 内容="width=设备宽度，初始宽度-scale=1.0">
<标题>自定义对话框</标题>
<链接 rel="样式表" href="custom-dialog.css">
< /头部>
<身体 >
<div id="customDialog" 类="对话框">
<div class="对话框- content">
<h2>自定义对话框标题</h2>
<p>这是自定义对话框内容。</p>>
<按钮 id="closeDialog">关闭</按钮>
</div>
</div>
<脚本 src="custom-dialog.js"></ 脚本>
</正文 >
</html>
- 接下来，创建一个 CSS 文件，例如
I将要。 打开custom-dialog.css并在其中添加以下内容以自定义对话框样式：
body {
字体系列：Arial、sans-serif;
}
.dialog {
显示：无;
位置：固定；
z-index：9999 ;
左：0;
顶部: 0;
宽度: 100% ;
高度: 100%;
溢出：auto;
背景颜色：rgba(0, 0, 0, 0.4);
}
.dialog-content {
背景颜色：#ffffff;
边距：15% auto;
填充：20px;
边框: 1px 实线 #888;
宽度 ：80%;
最大宽度：500px;
}
h2 {
margin -top: 0;
字体大小: 24px;
}
按钮 {
背景颜色: #4CAF50;
颜色: 白色;
填充：10px 20px;
边框：无；
光标：指针；
文本对齐：中心；
文本装饰: 无;
显示: inline-block;
字体大小: 16px;
边距：10px 2px;
过渡期：0.4s;
}
按钮:悬停 {
背景颜色：#45a049;
}
- 最后，创建一个 JavaScript 文件，例如
custom-dialog.js并向其中添加以下内容来处理显示和隐藏对话框：
文档. getElementById ("closeDialog").onclick = 函数() {
文档。getElementById("customDialog").样式.显示 = "无";
}
窗口。onclick = 函数(事件) {
if (事件。目标 == 文档。getElementById("customDialog")) {
文档.getElementById("customDialog").样式。显示 = "none";
}
}
您现在可以在浏览器中打开 custom-dialog.html。可以点击文件查看您自定义的对话框样式，或者点击关闭按钮关闭对话框]
以上内容来自网络，不代表本站全部观点：关注zhujipindao。 .com
评论前必须登录！
注册