Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

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


Text formatting options
Submit

Replies (9)


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.



https://imgur.com/WtHjXIj

this is the html



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>



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...


Text formatting options
Submit
Text formatting options
Submit