Hi
I have the below Code . I want when user click on below Anchor Tag
li><a href="#" id="login"><i class="fa fa-lock"></i> Login</a></li>
myModalLogin div should open in Dialog Box . On click it is changing Login to Logout but Dialog is not properly visible.
Thanks
--------------
$(document).ready(function () {
$("#myModalLogin").hide;
$('#myModalLogin').dialog({
autoOpen: false,
modal: true,
});
});
$('#login').click(function () {
$(this).html('Logout');
$('#myModalLogin').dialog('open');
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="~/Content/css/bootstrap.min.css" rel="stylesheet">
<link href="~/Content/css/font-awesome.min.css" rel="stylesheet">
<link href="~/Content/css/main.css" rel="stylesheet">
<link href="~/Content/css/responsive.css" rel="stylesheet">
</head>
<body>
<li><a href="#" id="login"><i class="fa fa-lock"></i> Login</a></li>
<div class="modal fade" id="myModalLogin" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="small-9 columns">
<div class="row">
<div class="small-6 columns">
<input type="text" name="firstName" placeholder="First name" />
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div
<script src="~/Scripts/js/main.js"></script>
<script src="~/Scripts/AppJs/jquery-ui-1.11.4.js"></script>
<script src="~/Scripts/AppJs/Login.js"></script>
</body>
</html>
<script src="~/Scripts/js/jquery.js"></script>