I successfully implemented a modal popup in my project, but encountered an issue where the popup moves to the left side if clicked multiple times.
Despite searching extensively online, I have not been able to find a solution to this problem.
Below is the code for my modal:
.followup-modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 380px;
background-color: #f7f7f7;
}
// more CSS styles...
<div class="popup-dragable hideElement" style="display: block;">
<div id="reminderPopup"><div id="reminder" class="popup-layout">
<form id="reminderForm" method="post">
<div class="modal followup-modal ui-draggable" id="reminderPopupdrag" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">select_followup</h5>
</div>
<div class="modal-body">
// more modal content...
</div>
<div class="modal-footer">
// modal footer content...
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>The issue seems to be related to the use of jQuery UI draggable feature on the '#reminderPopupdrag' element. When this line of code is removed, the problem goes away.
If anyone has insights or suggestions on how to resolve this issue, it would be greatly appreciated. Thank you!