关闭时获取Bootstrap的模态初始数据-*

当表示自举模式中,可以使用代码如很容易地检索相关联的数据


$('#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可以打开单个对话框。


慕哥6287543
浏览 113回答 2
2回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript