实现原理displayblock 把代码直接复制看效果 lt！DOCTYPE html lthtml lang=quotenquot lthead ltmeta charset=quotUTF8quot ltmeta name=quotviewportquot content=quotwidth=devicewidth， initialscale=10quot ltmeta。

1首先，打开html编辑器，新建html文件，例如indexhtml，输入问题基础代码2在indexhtml中的ltbody标签中，输入js代码function fun alert#39click success！#39 3浏览器运行indexhtml页面，此时点击按钮。

下面是一段演示代码lt！doctype htmllthtmlltheadltmeta charset=quotutf8quotlttitle弹出层到浏览器中央背景变暗lttitleltstyle*margin0padding0pxbodypadding30px#showwidth300pxheight200px。

这个是html和JavaScript的基础，其中按钮是写在html中，弹出事件写在JavaScript中具体代码如下 JavaScript function tan alertquotHELLOquot html ltinput type=button value=按钮 onclick=tan。

通过ID来获取菜单主体 btnaddEventListenerquotclickquot， menuClick绑定事件点击的时候触发函数 function menuClick 思路当现在菜单是关闭的时候点击按钮菜单CSS动画显示，然后添加class “open”。