Bootstrap Modal variables

Bootstrap link to pass variables to modal content
Used to build list of links calling same modal, but each link will pass certain name or variable into modal to be processed
Script below (in Bootstrap 3 but maybe used fine with Bootstrap 4), calls modal passing a PostID to confirm a delete of post
Then when user clicks on "Confirm delete", the tool knows which post to delete
Imported from Alwah.net

Three parts:
Part1: Command ancher to show the modal
Part2: The actual modal and content
Part3: JQuery needed to be called to pass variables into modal

<!-- Part1: Command to show the Modal -->
<a href="#" data-toggle="modal" data-target="#Modal13" data-postid="L3775367285">
<i class="fa fa-remove fa-2x text-danger" data-toggle="tooltip" title="Delete"></i></a> <!-- Bootstrap 3 -->
<a href="#Modal13" data-toggle="modal" data-postid="L3775367285">
<i class="fa fa-remove fa-2x text-danger" data-toggle="tooltip" title="Delete"></i></a> <<!-- Vootstrap 4 -->
<!-- End Part1 -->

<!-- Part2: The Modal -->
<div class="modal fade" id="Modal13" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-xs" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h2 class="modal-title" id="myModalLabel">Confirm delete</h2>
</div>
<div class="modal-body">
  <strong class="text-danger lead">
  Once deleted, no undo can be made
</strong>

<div class="text-info">
  Can't you just hide it instead
  </div>

  <strong class="text-danger lead">
  Sure to delete?
</strong>
  </div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-lg" data-dismiss="modal"><i class='fa fa-times'></i>Cancel</button>
<a href="#" class="btn btn-warning btn-lg" id="yesdelete"><i class='fa fa-trash'></i>Confirm delete</a>
</div>
</div>
</div>
</div>
<!-- End Part2 -->

<!-- Part3: JQuery needed -->
<script type="text/javascript">
$(document).ready(function () {
 $('#Modal13').on('show.bs.modal', function (e) {
  var button = $(e.relatedTarget) // Button that triggered the modal
  var getCid = button.data('postid');
  $('#yesdelete').attr('href', '/Do/?ActionID=4104&A7PostID=' + getCid);
 })
 // below needed in Bootstrap 3 only
 $("#Modal13").on('hidden.bs.modal', function () {
  $(this).data('bs.modal', null);
 })
})
</script>
<!-- End Part3 -->

Views 365 Downloads 129

'Bootstrap 3', 'Bootstrap 4.*', 'JQuery', 'bootstrap', 'html', 'modal', 'pass', 'variable', 'variables', 'user', 'id', 'jquery', 'js', 'java'

ANmarAmdeen
324
UI JS+JQuery
Revisions

v1.0