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

CodeFunctionName
What is this?

Public

Tested

Original Work
<!-- 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 > < <!-- Bootstrap 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 >
<br/ > <div class="text-info" >
Can't you just hide it instead
</div > <br/ >
<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 3,727

Downloads 1,302

CodeID
DB ID