javascript - 如何制作动态引导模态?
问题描述
例如,我有 3 个标签,每个标签都有不同的目标数据。
<a class="btn btn-outline-primary btn-sm" href="#" data-toggle="modal" data-target="#firstdata">
DATA 1
</a>
<a class="btn btn-outline-primary btn-sm" href="#" data-toggle="modal" data-target="#seconddata">
DATA 2
</a>
<a class="btn btn-outline-primary btn-sm" href="#" data-toggle="modal" data-target="#thirddata">
DATA 3
</a>
我如何获得不同的 id、标题和模态的内容?我不会创建 3 个模态,我只使用 1 个模态块代码
<div class="modal fade" id="firstdata" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">FIRST DATA</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>FIRST DATA CONTENT</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
解决方案
在您的脚本中添加以下 J Query 代码
$(document).on('click','.btn-sm',function(){
$("#firstdata").modal();
});
请不要忘记导入 J 查询,否则将无法正常工作
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
上面的代码应该在你的引导导入之上
推荐阅读
- javascript - PSQL服务器,通过邮递员发送请求时“关系不存在”
- python - SAS PROC LOGISTIC 和 Python sklearn LogisticRegression 之间的小偏差的来源(不受惩罚)?
- python - 具有增加级别 XP 要求的 Python 调平系统
- flutter - 如何显示默认的Android消息,如(+)按钮并显示自定义小部件代替键盘颤动?
- jenkins - 两个自由式 Jenkins 作业之间的手动批准步骤
- reactjs - 如何使用 react-google-maps “在 Google 地图上查看”
- html5-audio - AudioBuffer 节点 VS MediaElement
- java - 找不到jar命令
- python - 如何在我的 Cloud-Run Flask 应用程序中获取用户的 IP 地址?
- android - GoogleMap 没有在正确的位置缩放