Currently, I am working on a MVC project where I have implemented the User Login session. I have added a user logout button within a Bootstrap modal popup confirmation box. However, it seems that the box is not functioning properly. Does anyone know how to fix this issue?
Thank you
<header>
<a id="header-logo" href="#"></a>
<a class="navbar-brand" href="#"><img src="~/img/ekinitting _logo.png" class="img-responsive" style=" position: absolute; display: block; width: 260px; height: 65px; left: 10px; top: 10px;"></a>
@using (Html.BeginForm("LogOut", "Login", new { area = "" }, FormMethod.Post, new { id = "logoutForm" })){
@Html.AntiForgeryToken()
<a href="javascript:document.getElementById('logoutForm').submit()" style=" top:-28px;"><input type="image" id="myimage" src="~/img/log_out.png" style=" margin-top:15px; margin-left:150px; position:relative; float:right; " data-toggle="modal"
data-target="#basicModal" /></a>
}
<div class="col-lg-2" style="color:#ff0000; margin-top:28px; left:1055px; position:relative; ">
@Html.ActionLink("Hello " + ((eKnittingData.UserRegistration)Session["User"]).UserName + " :)", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Welcome", style = "color:#fada5b; text-decoration: none; font-size:14px;" })
</div>
<!--/.nav-collapse -->
<a href="~/Home/Index">
<input type="image" id="myimage" src="~/img/Red-home-icon.png" style="top:15px; position:relative; left:150px; float:right; " />
</a>
</header>
Modal
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content" style="background-color:#ffffff; border:solid 4px #e85656;margin-top:253px; left:-25px;">
<div class="modal-header" style="background-color:#e85656; height:15px;">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="margin-top:-12px;">x</button>
<span class="glyphicon glyphicon-warning-sign" style=" color:yellow; font-size:large; top:-10px; left:115px;" aria-hidden="true"></span>
<h4 class="modal-title" id="myModalLabel" style="text-align:center;"></h4>
</div>
<p style="text-align:center; font-family:'Ebrima'; color:black; margin-top:15px;"> <strong> Are you sure you want to logout? </strong></p>
<div class="modal-footer" style="text-align:center;">
<a href="#"><button type="button" class="btn btn-success btn-xs" style=" width:50px;">Yes</button></a>
<button type="button" class="btn btn-danger btn-xs" data-dismiss="modal" style=" width:50px;">No</button>
</div>
</div>
</div>
</div>