Modal popup from javascript
We are recently migrated to the new theme. Popup goes off when clicking outside the modal popup window. Below is the code to open the model. Please help.
$("#testDialog").modal("show");<div class="modal fade" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" >...</div>Suresh
Replies (9)
Hi,
Could you please clarify? Which popup are you using? SweetAlert ?
Can you please send us some screenshots via using https://imgur.com ?
Regards
Hi
https://imgur.com/7ZhD30o
This is the modal I am using. But when I click outside the popup , it goes off. I want the popup there evenif user click outside the popup. I added data-backdrop="static" property, but it is not working . I am using the purchased version of plugins.bundle.js file. But in the demo site, it is working fine. Do I need to change the js file ?
thanks
Suresh
Hi,
You will need to use Bootstrap 5 new attributes data-bs-backdrop="static" data-bs-keyboard="false" attributes to show a modal with static backdrop as explained in the Modal documentation.
Regards.
Thank you... This is working...
Below is the full html ...
<!DOCTYPE html>
<html >
<link href="style.bundle.css" rel="stylesheet" type="text/css">
<script src="plugins.bundle.js"></script>
<body>
<input type="button" onclick='openModal();' value="open">
<script>
function openModal()
{
$("#staticBackdrop").modal('show');
}
</script>
<!-- Modal-->
<div class="modal fade" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" >Modal Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i aria-hidden="true" class="ki ki-close"></i>
</button>
</div>
<div class="modal-body">
... Testing only....
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-primary font-weight-bold" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary font-weight-bold">Save changes</button>
</div>
</div>
</div>
</div>
</html>
https://imgur.com/WtHjXIj
this is the html
This seems to be an issue now. I tried with most of the js and css files which downloaded , however popup still disappears if click out side. I exactly did the same as in the document, but no luck. If needed, I can send the files which I am testing for this. Please let me know. This is really a headache now.
Have you tried to use data-bs-backdrop="static" data-bs-keyboard="false" attributes to show a modal with static backdrop ?
yes, I tried and working. Thank you.
