I have a modal thats being created when "Click me here" button is clicked, Further the modal needs to show a toast modal conveying some Thank you message.
The thank you modal closes the existing modal when save is clicked. The expected was, when save is clicked the save modal should not be unloaded, the thank you modal should be kept loaded over the top of save modal.
When save is clicked I get the error message
Cannot read properties of undefined (reading 'backdrop')
<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA /3y gxIOqMEjwtxJY7qPCqsdltbNJuaOe923 mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
</head>
<body>
<button id="clickme">Click me here</button>
<ul >
</ul>
<script>
function showToast(m,title="Error") {
$("#modal")
.html(`<div id="messagemodal" tabindex="-1" role="dialog" aria-labelledby="messagemodal" aria-hidden="true">
<div role="document">
<div >
<div >
<h5 >${title}</h5>
<button type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div >
${m}<br/><br/>
</div>
</div>
</div>
</div>`);
var modal = new bootstrap.Modal(document.getElementById('messagemodal'), {
keyboard: false
});
modal.show();
}
$("#clickme").click(function (event) {
var code = $(".dropdown-menu").length 1
$(".task-point").append(`
<li >
<img src="https://img.icons8.com/color/48/000000/networking-manager.png" />
<div >
<button type="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> Action </button>
<ul >
<li><a data-bs-toggle="modal" href="#exampleModalToggle-${code}" role="button" href="#">Edit ${code}</a></li>
<li><a href="#">Delete ${code}</a></li>
<li><a href="#">Run ${code}</a></li>
</ul>
</div>
<div >This is ${code} item<br/>
<small >This is a ${code} item description</small>
<div>
<div id="exampleModalToggle-${code}" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div >
<div >
<div >
<h1 id="exampleModalToggleLabel">Create a file</h1>
<button type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div > What is Lorem Ipsum? </div>
<div >
<button data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" onclick="showToast('Thanks for saving');">Save</button>
</div>
</div>
</div>
</div>
</li>
`);
$(`#exampleModalToggle-${$(".dropdown-menu").length}`).modal("show")
})
</script>
</body>CodePudding user response：
Please try below code and replace it with your code:
<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA /3y gxIOqMEjwtxJY7qPCqsdltbNJuaOe923 mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
</head>
<body>
<style>
.modal-backdrop.fade.show .modal-backdrop.show {
z-index: 9999;
}
div#messagemodal {
z-index: 99999;
}
</style>
<button id="clickme">Click me here</button>
<ul >
</ul>
<div id="modal">
</div>
<script>
function showToast(m,title="Error") {
$("#modal")
.html(`<div id="messagemodal" tabindex="-1" role="dialog" aria-labelledby="messagemodal" aria-hidden="true">
<div role="document">
<div >
<div >
<h5 >${title}</h5>
<button type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div >
${m}<br/><br/>
</div>
</div>
</div>
</div>`);
$("#messagemodal").modal('show');
$(document).on("click", ".me-1", function() { $("#messagemodal").modal('hide'); $("#modal").empty();});
}
$("#clickme").click(function (event) {
var code = $(".dropdown-menu").length 1
$(".task-point").append(`
<li >
<img src="https://img.icons8.com/color/48/000000/networking-manager.png" />
<div >
<button type="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> Action </button>
<ul >
<li><a data-bs-toggle="modal" href="#exampleModalToggle-${code}" role="button" href="#">Edit ${code}</a></li>
<li><a href="#">Delete ${code}</a></li>
<li><a href="#">Run ${code}</a></li>
</ul>
</div>
<div >This is ${code} item<br/>
<small >This is a ${code} item description</small>
<div>
<div id="exampleModalToggle-${code}" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1" da>
<div >
<div >
<div >
<h1 id="exampleModalToggleLabel">Create a file</h1>
<button type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div > What is Lorem Ipsum? </div>
<div >
<button onclick="showToast('Thanks for saving');">Save</button>
</div>
</div>
</div>
</div>
</li>
`);
$(`#exampleModalToggle-${$(".dropdown-menu").length}`).modal("show");
})
</script>
</body>For Thank you popup faded backdrop, put below css in the style sheet
.modal-backdrop.fade.show .modal-backdrop.show {
z-index: 9999;
}
div#messagemodal {
z-index: 99999;
}
If above css is not work then please use parent class name along with the css.
Thanks