📅 最后修改于: 2023-12-03 14:44:01.290000 🧑 作者: Mango
"Lity" 是一个轻量级的 jQuery 插件，用于创建响应式的轻量级模态窗口。
该插件的最新版本是1.7.0。它提供了许多选项，以定制您的模态窗口。其中，"open" 和 "hide" 选项用于控制模态窗口的显示和隐藏。另外，您还可以使用 "close" 选项来添加关闭按钮。
以下是可用于定制您的模态窗口的选项：
open: boolean (默认值: false) 表示模态窗口是否应该在页面加载时打开。
hide: boolean (默认值: true) 表示模态窗口是否应该在点击模态窗口以外的区域时关闭。
close: boolean或字符串或jQuery对象 (默认值: true) 表示是否应该在模态窗口中添加关闭按钮。如果是字符串，则可以是任何您想要的HTML。
以下是一个完整的示例，说明如何使用 "open"，"hide" 和 "close" 选项来创建一个响应式轻量级的模态窗口：
<!DOCTYPE html>
<html>
<head>
<title>Lity Modal Window</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lity/1.7.0/lity.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lity/1.7.0/lity.min.js"></script>
<style>
.my-modal {
background-color: #fff;
border-radius: 3px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
padding: 20px;
text-align: center;
max-width: 500px;
}
</style>
</head>
<body>
<p>Click the button below to open the modal window:</p>
<button data-lity data-lity-target="#my-modal">Open Modal</button>
<div id="my-modal" class="my-modal" data-lity-close>
<h2>Welcome to my modal window!</h2>
<p>Here is some content.</p>
<p>You can use the "hide" option to close the modal window by clicking outside of the window.</p>
<p>You can use the "close" option to add a custom close button or use the default X button.</p>
<button class="my-close-btn" data-lity-close>Close Modal</button>
</div>
<script>
$(function() {
$('#my-modal').lity({
open: true,
hide: true,
close: '<div class="my-close-x">×</div>'
});
});
</script>
</body>
</html>
注：上面的代码需要引用 jQuery 和 Lity 的源文件及样式表。