web前端练习10----写一个弹出框效果

效果图:
web前端练习10----写一个弹出框效果_第1张图片

思路:
简单的说就是写一个div,显示隐藏就可以了
具体步骤如下:
1创建一个div(puman)
设置铺满全屏;
设置浮在窗口最上面
设置半透明
子元素竖直居中

2创建一个div(puman)的子元素dialog
就是半透明布局的弹出框
设置固定的宽高
里面存放条目

3用js添加dialog的子元素dialog_item
并并渲染出自己写的假数据

4dialog_item添加点击事件,隐藏div(puman)
neirong 点击事件,显示 div(puman)

这里就不做详细讲解了直接贴源码了




    
    
    
    
    
    


测试弹出框

源码下载:
https://download.csdn.net/download/zhaihaohao1/10915818

你可能感兴趣的:(web前端2018,web前端)