通过Js动态控制Bootstrap模态框-弹窗效果

目的：实现弹出窗、仅关闭弹窗之后才能操作（按ESC可退出）。自适应宽度与高度、当文本内容太多时、添加滚动条效果。

效果图

在这里插入图片描述

源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Bootstrap Modal Example</title><!-- 引入 jQuery 库 --><script src="https://code.jquery.com/jquery-3.5.1.min.js"></script><!-- 引入 Bootstrap 的 CSS 文件 --><link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet"><!-- 引入 Bootstrap 的 JS 文件 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.min.js"></script>
</head>
<body><!-- 多个按钮 --><button class="btn btn-primary openModalBtn" data-parameter="parameter1">打开模态框 1</button><button class="btn btn-secondary openModalBtn" data-parameter="parameter2">打开模态框 2</button><button class="btn btn-success openModalBtn" data-parameter="parameter3">打开模态框 3</button><!-- 模态框 --><div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="false"><div class="modal-dialog" role="document"><div class="modal-content" style=""><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">模态框标题</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body"><div id="modalContent">这里将显示参数内容</div></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button></div></div></div></div><script>$(document).ready(function() {// 为具有 openModalBtn 类的按钮添加点击事件处理程序$('.openModalBtn').click(function() {// 获取按钮上的数据参数var parameter = $(this).data('parameter');$('#exampleModalLabel').html(parameter);// 将参数显示在模态框的内容区域var html = '<p><span class="text-huge">第一章1</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章</li></ul><p>&nbsp;</p>'+
'<p><span class="text-huge">第一章2</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章</li></ul><p>&nbsp;</p>'+
'<p><span class="text-huge">第一章3</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章</li></ul><p>&nbsp;</p>'+
'<p><span class="text-huge">第一章4</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章</li></ul><p>&nbsp;</p>'+
'<p><span class="text-huge">第一章5</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章</li></ul><p>&nbsp;</p>'+
'<p><span class="text-huge">第一章6</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章</li></ul><p>&nbsp;</p>'+
'<p><span class="text-huge">第一章7</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章</li></ul><p>&nbsp;</p>'+
'<p><span class="text-huge">第一章8</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章</li></ul><p>&nbsp;</p>'+
'<p><span class="text-huge">第一章9</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章</li></ul><p>&nbsp;</p>'+
'<p><span class="text-huge">第一章10</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章</li></ul><p>&nbsp;</p>'+
'<p><span class="text-huge">第一章11</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章</li></ul><p>&nbsp;</p>'+
'<p><span class="text-huge">第一章12</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章</li></ul><p>&nbsp;</p>'+
'<p><span class="text-huge">第一章13</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章</li></ul><p>&nbsp;</p>'+
'<p><span class="text-huge">第一章14</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章</li></ul><p>&nbsp;</p>'+
'<p><span class="text-huge">第一章15</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章</li></ul><p>&nbsp;</p>'+
'<p><span class="text-huge">第一章16</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章</li></ul><p>&nbsp;</p>'+
'<p><span class="text-huge">第一章17</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章</li></ul><p>&nbsp;</p>'+
'<p><span class="text-huge">第一章18</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章</li></ul><p>&nbsp;</p>'+
'<p><span class="text-huge">第一章19</span></p><p><span class="text-big">第一章</span></p><p>第一章</p><p><span class="text-small">第一章</span></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><p><mark class="marker-yellow"><strong>第一章</strong></mark></p><ul><li style="margin-left:40px;">第一章</li><li style="margin-left:40px;">第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章</li><li style="margin-left:40px;">第一章第一章第一章第一章第一章第一章第一章第一章</li></ul><p>&nbsp;</p>';$('#modalContent').html(html);// 显示模态框$('#exampleModal').modal('show');});});</script>
</body>
</html>