您的位置：首页 > Web前端 > BootStrap

Bootstrap：向Modal传参

2020-08-10 17:22 1226 查看

Modal，也称作"模态框"。最近刚接触Bootstrap，记录一下。

[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>向Modal传参</title>
<!--1.添加到 <head> 标签中，并放置在所有其它样式表之前就行了。-->
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<!--2.引入JQuery-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
</head>
<body>
<!--
data-toggle: 以什么事件触发，如modal,popover,tooltips等；
data-target: 事件的目标；
data-*:	要传递的数据的参数名，*可以随便写，比如data-id，data-name
-->
<!--第一个按钮-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"
data-whatever="第一个按钮传来的数据@mdo">Open modal for @mdo</button>
<!--第二个按钮-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"
data-whatever="第二个按钮传来的数据@fat">Open modal for @fat</button>
<!--第三个按钮-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"
data-whatever="第三个按钮传来的数据@getbootstrap">Open modal for @getbootstrap</button>

<!--模态框-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!--模态框的header-->
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <!--"关闭"小图标-->
</button>
</div>
<!--模态框的body-->
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<!--模态框的footer-->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
/*当#exampleModal模态框显示时*/
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // 打开模态框的那个button
var recipient = button.data('whatever') // Extract info from data-* attributes（这个button中的data-whatever属性的值）
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// （如果有必要，你可以在这里发起一个Ajax请求，然后在回调的方法中进行更新操作：修改模态框中的内容）
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
</script>
<!--3.引入bootstrap相关的js，注意顺序：1.Jquery 2.popper.js 3.bootstrap.js-->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>
</body>
</html>

参考资料：

官方Demo：https://v4.bootcss.com/docs/components/modal/#live-demo

data-toggle和data-target：http://wenda.bootcss.com/question/2285

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航