Bootstrap modal box is disappearing in AEM

Question

This is my html code for bootstrap modal. Its working as expected in my local browser but when I am running in AEM, the modal box comes for a second and disappears. I read many answers on stackoveflow but none of them worked for AEM. Has anyone else experienced this issue?

 <div class="wrapper"> <button type="button" id="modalButton" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="javascript: return false;" > Click me </button> </div> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> </div> <div class="modal-body"></div> </div> </div> </div>

Answer 1

I fixed the issue, the data-toggle was not working

Added the open function here:

<a type="button" id="modalButton" class="btn btn-primary" data-target="#myModal"  onclick="showmodal ();" >
            Click me
        </a>

And the close function here:

<button type="button" class="close" onclick="hidemodal ()">&times;</button>

Added these two within the script tag


function showmodal () {
            $("#myModal").show();
        }
        function hidemodal () {
            $("#myModal").hide();
        }