Bootstrap button to show modal has to be clicked many times to open the modal - bootstrap-modal

Question

I am using Bootstrap4 and in my navbar i have a button to open a modal.I have added jquery,popper and bootstrap js in correct order as mentioned in bootstrap website .I have to click this button 5-6 times continuously to open the modal
<asp:Button ID="btnUserDetails" runat="server" Text="USER DETAILS" data-toggle="modal" data-target="#userDetails" />
my modal is
<div class="modal fade" id="userDetails" tabindex="-1" role="dialog" >
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<asp:Label ID="lblLoginID" runat="server"></asp:Label><br />
<asp:Label ID="lblIPAddress" runat="server" ></asp:Label><br />
<asp:Label ID="lblSystemName" runat="server" ></asp:Label><br />
<asp:Label ID="lblVersionInfo" runat="server" ></asp:Label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I tried using javascript to open the modal by using this code
<asp:Button ID="btnUserDetails" runat="server" Text="USER DETAILS" data-toggle="modal" data-target="#userDetails" OnClientClick="return openmodal();return false;" />
<script type="text/javascript">
function openmodal() {
$('#userDetails').modal('show');
}
</script>
However this does not work .My javascript function is being called as i put an alert message and tested .There is something weird happening with vertical scroll bar though on click of the button ,it shows up for sometime on click of button and vanishes i think once button click event ends .

Answer 1

The issue is with "fade" in the modal
<div class="modal fade" id="userDetails" tabindex="-1" role="dialog" >
i removed fade and used "show" and the modal is working
<div class="modal show" id="userDetails" tabindex="-1" role="dialog" >
also i added a javascript function for the button that triggers the model
<script>
$( '#btnUserDetails').click( function(){
$( '#userDetails').modal('show');
});
</script>