MVC logout Button Confirm Modal Popup Not working - css

Question

Im develop the MVC project, Im developed the User Login session, Im add the user logout button for bootstrap modal popup confirmation box, but box is not working,How can i fix it.
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;">
<button type="button" class="btn btn-success btn-xs" style=" width:50px;">Yes</button>
<button type="button" class="btn btn-danger btn-xs" data-dismiss="modal" style=" width:50px;">No</button>
</div>
</div>
</div>
</div>

Answer 1

You should place your form inside the modal not to the logout button which is opening the modal.
Just put the form in the modal-body where the confirmation text is written in your code.
All you need to put the form outside to the modal-body and footer div.