I am trying to use the technique described on GetBootStrap.com, for simulating multiple modal popups, described here:
See “Toggle between modals” here…
https://getbootstrap.com/docs/5.3/components/modal/However,
But since I am doing this from an ASP.NET Core MVC project, I’m loading the popup’s data and showing it via javascript. The problem is I don’t know how to specify the bootstrap attributes, data-bs-target, data-bs-toggle, and data-bs-dismiss, in javascript.
The link to the modal popup…
<a class="details href="javascript:;">Edit</a>
HTML for the popup…
<div id="modal2" class="modal" tabindex="-1" data-bs-backdrop="static">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">My Title</h5>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-secondary"
data-bs-target="#modal1"
data-bs-toggle="modal"
data-bs-dismiss="modal">
Back
</button>
<!--This button omitted because it’s handled in script… -->
<!--<button class="btn btn-primary"
data-bs-target="#modal3"
data-bs-toggle="modal"
data-bs-dismiss="modal">
Open 3rd
</button>-->
</div>
</div>
</div>
</div>
Script to load data and show the popup…
$("#myGrid .details").click(function (e) {
e.preventDefault();
id = $(this).closest("tr").find("td").eq(0).html();
$.ajax({
type: "GET",
url: "/myController/EditPopup",
data: { "id": id },
success: function (response) {
$("#juvModal").find(".modal-body").html(response);
//data-bs-target/popup/dismiss attributes here???
$('#juvModal').modal('show');
}
. . .
So my question is, How to specify data-bs-target/popup/dismiss attributes in the success function (or elsewhere)?