弹窗浮层mask

最新推荐文章于 2023-08-24 17:16:19 发布

rainbow_677294

最新推荐文章于 2023-08-24 17:16:19 发布

阅读量691

点赞数

本文链接：https://blog.csdn.net/rainbow_677294/article/details/79485558

版权

本文详细讲解如何使用CSS技术创建弹窗浮层Mask，包括样式设定及应用场景，帮助开发者理解并掌握这一常见前端交互效果的实现。

摘要由CSDN通过智能技术生成

<div id="callout" class="button callout_button"><a href="#">弹出对话框</a></div>
	<div id="mask" class="mask"></div>
	<div class="dialog" id="dialog">
    	    <div class="dialog_head" id="move_part">可拖拽部分</div>
    	    <div class="dialog_content"></div>
    	    <div class="button close_button" id="close"><a href="#">点我关闭对话框</a></div>
        </div>

html代码如上：.mask为浮层，.dialog为弹窗的结构

 a{text-decoration: none; color: #eee; display: block;}
    .button{width: 200px; height: 50px; border-radius: 20px; text-align:center;line-height: 50px;}
    .callout_button{background:#FF5B5B;margin:0 auto; }
    .callout_but