对话框,弹出窗口,覆盖成为web应用程序的一个共同特征。不久前,我们依靠组件库(或jQuery插件)来创建这样的对话框。

事情发生了变化。现在有一个对话框的HTML元素兼容所有现代浏览器。

本教程将介绍如何使用这些对话框与简约的方法。

如何使用HTML和角对话框吗?

一个HTML对话框是一个HTML元素,默认不呈现在屏幕上:

<对话框>
< div >
你的国家:
<选择>…< /选择>
< / div >
< div >
<按钮>好> < /按钮
< / div >
> < /对话框

我们可以通过调用其显示上面的对话框显示()方法(或showModal ()如果我们想要像一个模态对话框)

角,我们可以使用HTML元素的引用模板引用变量(标签语法)。

因此,我们可以打开我们的对话框下面的角增加代码:

# myDialog > <对话框
…
> < /对话框
<按钮(点击)= " myDialog.show ()" > < /按钮>显示对话框

这是它!很容易。我们可能想要关闭这个对话框,添加这个功能,:

# myDialog > <对话框
…
<按钮(点击)= " myDialog.close () " >
好吧
< /按钮>
> < /对话框
<按钮(点击)= " myDialog.show ()" > < /按钮>显示对话框

按下ESC关键在你的键盘也将关闭一个HTML对话框。

完整的代码可以访问示例在Stackblitz和下面嵌入:

如何风格HTML对话框?

默认的HTML对话框是基本的,看起来并不大:

幸运的是,这是一个HTML元素,所以常规的CSS样式。例如,我们可以改变边界,背景颜色,并使用样式更多,我们将适用于其他任何HTML元素。

例如,下面的CSS样式改变边界,和背景,并添加一个影子在对话框:

对话框{
background - color: rgba (32、82、221、0.5);
颜色:白色;
边框颜色:透明;
溢出:隐藏;
border - radius: 5 px;
光标:指针;
不必:0 0 20 px 8 px # d0d0d0;
身高:100 px;
宽度:200 px;
}

当然,这仍然是一个基本的对话框,但是你明白我的意思:我们可以定制任何我们想要的。

最后的代码示例访问Stackblitz和下面嵌入:

我的名字是betway必威滚球。我是谷歌开发者角度,专家顾问和教练角训练我帮助web开发团队学习和熟悉角。

如果你需要任何帮助web开发,随时取得联系!

如果你喜欢这篇文章,请为它鼓掌或分享它。我总是感激你的帮助。你也可以订阅中这里。