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

最新推荐文章于 2022-12-14 10:59:09 发布

zhaihaohao1

最新推荐文章于 2022-12-14 10:59:09 发布

阅读量983

点赞数

分类专栏： web前端2018 文章标签： web前端

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/86476559

版权

效果图：
在这里插入图片描述

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

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

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

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

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--手机上运行时，加上这句话-->
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
    <

最低0.47元/天解锁文章

zhaihaohao1

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前端练习10----写一个弹出框效果

效果图：思路：简单的说就是写一个div，显示隐藏就可以了具体步骤如下：1创建一个div(puman)设置铺满全屏；设置浮在窗口最上面设置半透明子元素竖直居中2创建一个div(puman)的子元素dialog就是半透明布局的弹出框设置固定的宽高里面存放条目3用js添加dialog的子元素dialog_item并并渲染出自己写的假数据4dialog_item添加点击事件...
复制链接

扫一扫