jquery 模态框
jQuery 模态框的实现方法
使用 jQuery 实现模态框通常依赖现成的插件或手动编写代码。以下是几种常见方法：
使用 Bootstrap 模态框
Bootstrap 提供了内置的模态框组件，结合 jQuery 可以快速实现：
<!-- 触发按钮 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开模态框</button>
<!-- 模态框结构 -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">标题</h4>
</div>
<div class="modal-body">内容</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<!-- 依赖脚本 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>手动实现简易模态框
若需轻量级方案，可通过 jQuery 动态控制 DOM 元素：
<style>
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
display: none;
}
.modal-content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
}
</style>
<button id="openModal">打开模态框</button>
<div class="modal-overlay">
<div class="modal-content">
<p>自定义模态框内容</p>
<button id="closeModal">关闭</button>
</div>
</div>
<script>
$(document).ready(function() {
$("#openModal").click(function() {
$(".modal-overlay").fadeIn();
});
$("#closeModal").click(function() {
$(".modal-overlay").fadeOut();
});
});
</script>使用 jQuery UI 对话框
jQuery UI 提供标准化对话框组件：
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div id="dialog" title="基本对话框">
<p>这是 jQuery UI 实现的模态对话框</p>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("#dialog").dialog({
autoOpen: false,
modal: true
});
$("#opener").click(function() {
$("#dialog").dialog("open");
});
});
</script>注意事项
- 移动端适配需额外处理触摸事件和响应式布局
- 复杂交互建议使用现成库（如 FancyBox、Magnific Popup）
- 模态框应添加无障碍访问属性（如 ARIA 标签）
