如何用CSS制作图片的模态框

 时间:2024-10-31 11:43:03

1、首先用sublime新建一个html文档,在文档中引入一张图片,如下图所示

如何用CSS制作图片的模态框

2、接下来就需要定义图片的modal了,如下图所示,包括关闭按钮,内容区域

如何用CSS制作图片的模态框

3、然后我们需要给图片定义一下样式,这里给其加了一下圆角,然后设置了悬停的透明度,如下图所示

如何用CSS制作图片的模态框

4、接下来我们就需要给图片的模态框部分定义样式了,内容如下图所示

如何用CSS制作图片的模态框

5、设置好页面的样式以后,我们就可以在脚本中给图片添加点击事件,让其点击的时候显示模态框,如下图所示

如何用CSS制作图片的模态框

6、我们运行程序以后,在页面中会默认显示如下图所示的效果,图片已经加上了圆角

如何用CSS制作图片的模态框

7、当我们点击图片的时候,你会看到显示了图片的模态框,如下图所示,和我们定义的样式一样

如何用CSS制作图片的模态框
  • Excel如何批量输入平方和立方
  • QC七大工具绘制方法
  • minitab软件补丁安装使用步骤使用:
  • Excel中绘制直观的股价图教程?
  • Tableau如何为数据图表设置一键返回按钮
  • 热门搜索
    1234网址大全 新贝吸奶器怎么样 诗词大全 斗龙战士图片大全 小学生手工制作大全 邮政银行贷款怎么贷 蝴蝶简笔画图片大全 淘宝店铺怎么推广 手自一体怎么开 阳宅风水图解大全