layui框架中弹框使用(背景透明)

最新推荐文章于 2025-09-11 02:22:15 发布

原创最新推荐文章于 2025-09-11 02:22:15 发布 · 6.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #javascript #jquery #css #html

layui 同时被 2 个专栏收录

2 篇文章

订阅专栏

弹出框

2 篇文章

订阅专栏

本文介绍如何利用layui框架创建自定义的模态框，包括样式设置、按钮触发及使用layui的layer模块进行弹框控制。通过具体代码示例，展示了如何定义模态框的样式、内容以及响应式设计。

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta charset="utf-8">
		<title>模态框使用</title>
		**<!-- 引入layui中css和js时 两个文件必须在src文件夹下 不能单独的提出 因为src文件夹中有layui.js中的依赖，包括jq.js等 -->**
		<link rel="stylesheet" type="text/css" href="src/css/layui.css"/>
		<script src="src/layui.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.box{position: absolute;width: 100%; height: 100%;left:0;top: 0;background: #85C998;display: flex;align-items: center;justify-content: center;}
			.show_modal{background: #FFF;border-radius: 30px;padding: 6px 10px;text-align: center;border:none;}
			.eq{text-align: center;padding: 20px 10px;}
			.eq .erweima{width: 150px;}
			.eq .close{margin-top: 20px;}
			.eq .close img{width: 30px;}
			/* 设置弹框透明 */
			.shadows{background-color: transparent !important;box-shadow: 0 0 0 rgba(0,0,0,0) !important;}
        
		</style>
	</head>
	<body>
		<div class="box">
			<!-- <button type="button">点击弹出模态框</button> -->
			<button class="show_modal" onclick="show_modal()">点击弹出模态框</button>
		</div>
		
		
	</body>
	<script type="text/javascript">
		//使用组件 初始化组件
		layui.use('layer',function(){
			var layer = layui.layer;
		})
		//可编辑的弹框中文本
		var text = `<div class="eq">
<div><img class="erweima" src="img/ticket.jpg" ></div>
			<div class="close" ><img onclick="close_modal()" src="./src/css/modules/layer/default/loading-1.gif" ></div>
		</div>`;
		function show_modal() {
			layer.open({
				  closeBtn: 0,  //右上角关闭图标不显示
			      type: 1,
				  title:false,
				  skin: 'shadows',  //定义一个类名 可修改弹框透明等样式
			      area: ['200px', '250px'], 
			      shadeClose: true, //点击遮罩关闭
			      content: text  //文本内容
			    });
		};
		close_modal = () => {
			layer.closeAll();
		}
		
</script>

[参考layui官方文档](https://www.layui.com/doc/modules/layer.html)