I have been working on setting up a page with 14 different modals. Initially, all the modals were opening normally, but I recently discovered a way to make them draggable when opened. After some trial and error, I managed to implement this feature successfully for one modal. However, now I am facing an issue where only one modal opens while the rest do not unless I specifically reference their names in the code. This means that the first modal stops working if I change the code to accommodate another modal. Can someone please guide me on how to write JavaScript code that can be generalized for all my modals?
Below is the snippet of script code I am using:
<script type="text/javascript">
window.onload=function(){
$('#btn1').click(function() {
// reset modal if it isn't visible
if (!($('.modal.in').length)) {
$('.modal-dialog').css({
top: 110,
left: 500
});
}
$('#modal1').modal({
backdrop: true,
show: true
});
$('.modal-dialog').draggable({
handle: ".modal-header"
});
});
}
</script>
And here are excerpts from my modals' code (for two modals instead of all 14):
<button id="btn1" class="btn btn-info btn-lg" data-target="#modal1">Modal 1</button>
<div class="modal fade" id="modal1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" >Modal 1</h4>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<button id="btn2" class="btn btn-info btn-lg" data-target="#modal2">Modal 2</button>
<div class="modal fade" id="modal2" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" >Modal 2</h4>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Adding another script after the existing one with new "#btn" or "#modal" results in only the latest one working. When adding a comma after the first "btn" or "modal", the two modals end up overlapping. What could be causing this issue? Any help would be greatly appreciated.