学习HTML5(二) - jQuery 模态框学习

最新推荐文章于 2022-09-28 14:24:40 发布

两个幽灵

最新推荐文章于 2022-09-28 14:24:40 发布

阅读量331

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML学习

本文链接：https://blog.youkuaiyun.com/u010099177/article/details/84593071

HTML学习专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用event.relatedTarget和HTML data-*属性，根据不同按钮触发同一模态框时显示不同内容的方法。通过jQuery实现模态框内容的动态更新，适用于多个按钮触发同一模态框但需展示特定信息的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模型根据不同的按钮而变化

链接: https://v3.bootcss.com/javascript/#modals

个人总结

Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use event.relatedTarget and HTML data-* attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on relatedTarget,

翻译：有许多按钮都触发同一个窗口，只是内容不一样？

使用event.relatedTarget属性和HTML data-* 属性使得窗口内容与具体按钮关联起来。

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // 触发窗口的按钮
  var recipient = button.data('whatever') // 从data-*属性中提取信息
  // 如有必要, 你可以在这里初始化一个AJAX请求然后在回调中更新信息.
  // 更新窗口的内容. 我们在这使用jQuery, 但你可以用a data binding library或者other methods.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

其它具体问题参见原链接。

jQuery 选择器总结：jQuery选择器（总结的非常好）

jQuery操作select控件：jquery操作select(取值，设置选中） - Jaye118 - 博客园