当表示自举模式中,可以使用代码如很容易地检索相关联的数据
$('#myModal').on('show.bs.modal', function (e) {
var id = $(e.relatedTarget).data('id');
alert(id);
}
关闭引导程序模式时是否可能相同?
特别是当被特定按钮(即确认按钮,而不是两个取消按钮)关闭时?在relatedTarget似乎没有提供任何button的模式里面,也不在Shidden.bs.modal事件。
在下面的操场data-id属性值中,当modal以类似方式data-id显示模式主体时,单击“是”时,应在删除按钮下方显示删除值:
$(document).ready(function () {
$('#deleteModal').on('show.bs.modal', function (e) {
$('#testOutput,#testOutput2').text('');
var id = $(e.relatedTarget).data('id');
$('#deleteId').text(id || 'id retrieval failed');
});
$('#deleteModal').on('hidden.bs.modal', function (e) {
var id = $(e.relatedTarget).data('id'); //does not work
$('#testOutput2').text(id || '"hidden.bs.modal" id retrieval failed');
});
$('#confirmDeleteBtn').click(function (e) {
var id = $(e.relatedTarget).data('id'); //does not work
//var id = $(this).closest('.modal').data('id'); //doesnt work neither
$('#testOutput').text(id || '"btn.close .modal" id retrieval failed');
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="col offset-3">
<div class="d-flex">
<button class="mt-4 btn btn-primary" data-toggle="modal" data-target="#deleteModal" data-id="42">delete record 1</button>
<button class="mt-4 btn btn-primary" data-toggle="modal" data-target="#deleteModal" data-id="123">delete record 2</button>
</div>
<h5 class="mt-4 text-danger" id="testOutput"></h5>
<h5 class="text-danger" id="testOutput2"></h5>
</div>
请注意id
,打开的button
时间不是恒定的,即有许多deletebutton
可以打开单个对话框。
相关分类