对话框、弹出窗口和叠加已经成为web应用程序的常见特征。不久以前，我们依赖组件库(或jQuery插件)来创建这样的对话框。

事情已经变了。现在有一个对话框HTML元素兼容所有现代浏览器．

本教程将演示如何以极简的方式使用这样的对话框。

如何在Angular中使用HTML对话框?

HTML对话框是默认情况下不会在屏幕上显示的HTML元素:

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

我们可以通过调用its来显示上面的对话框显示()方法(或showModal ()如果我们想要表现为模态对话框)

在Angular中，我们可以使用模板引用变量(标签语法)。

因此，我们可以用下面的Angular代码来打开对话框:

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

就是这样!很简单。我们可能想在某些时候关闭这个对话框，所以让我们也添加这个功能:

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

按下ESC键也会关闭HTML对话框。

可以访问完整的代码示例就在斯塔克布利茨并嵌入如下:

如何样式一个HTML对话框?

默认的HTML对话框是基本的，看起来不太好:

幸运的是，它是一个HTML元素，所以可以使用常规的CSS样式。例如，我们可以使用应用于任何其他HTML元素的样式来更改边框、背景颜色等。

例如，下面的CSS样式会改变边框和背景，并在对话框周围添加阴影:

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

当然，这仍然是一个基本的对话框，但是您可以理解:我们可以以任何我们想要的方式定制它。

最后一个示例的代码可以是在Stackblitz上访问并嵌入如下:

我叫betway必威滚球．我是Angular的谷歌开发专家，也是角训练在那里我帮助web开发团队学习并熟悉Angular。

如果您在网页开发方面需要任何帮助，请随时与我们联系!

如果你喜欢这篇文章，请鼓掌或分享。你的帮助我永远感激。你也可以点击此处订阅Medium．