html弹窗提示代码

HTML弹窗提示示例

显示弹窗

×

这是一个HTML弹窗提示。

您可以在这里显示一些提示信息。

首先，我们在头部样式部分定义了弹窗的样式，包括弹窗的背景，内容区域以及关闭按钮的样式。

在body标签中，我们添加了一个按钮，当点击这个按钮时，会调用showModal()函数显示弹窗。

接着，我们创建了一个元素，并给它设置id为"myModal"，class为"modal"，这个元素就是我们的弹窗。在这个元素内部，我们添加了一个内容区域用于展示提示信息和一个关闭按钮。

在JavaScript部分，我们定义了showModal()和hideModal()两个函数，分别用于显示和隐藏弹窗。showModal()函数将弹窗的display属性设置为"block"，使其显示出来；hideModal()函数将display属性设置为"none"，使其隐藏起来。

*，我们通过给弹窗的元素添加一个onclick事件，当点击弹窗区域外的地方时，调用hideModal()函数将弹窗隐藏起来。

通过以上代码，你可以在点击"显示弹窗"按钮时显示弹窗，在弹窗区域外或点击关闭按钮时隐藏弹窗。你可以根据自己的需求修改弹窗内容和样式。