Untitled

.alert-box {
color:#555;
border-radius:10px;
font-family:Tahoma,Geneva,Arial,sans-serif;font-size:11px;
padding:10px 36px;
margin:10px;
            }
 .alert-box span {
font-weight:bold;
text-transform:uppercase;
                }
   .error {
background:#ffecec url('images/error.png') no-repeat 10px 50%;
border:1px solid #f5aca6;
          }
  .success {
background:#e9ffd9 url('images/success.png') no-repeat 10px 50%;
border:1px solid #a6ca8a;
          }
   .warning {
background:#fff8c4 url('images/warning.png') no-repeat 10px 50%;
border:1px solid #f2c779;
             }
   .notice {
background:#e3f7fc url('images/notice.png') no-repeat 10px 50%;
border:1px solid #8ed9f6;
           }

var turn=false;
     function Error(turn) {
if (turn == true) {

    if (!$('.alert-box').length) {
        $('<div alert-box notice" ><span>notice: </span>Wrong password or username!</div>').prependTo('#Not').delay(5000).fadeOut(1000, function () {
            $('.alert-box').remove();
        });
    };
};
};

<script>
$(document).ready(function () {

    $('#savedata').click(function (e) {
        e.preventDefault();
        var data = {
            username: function () { return $("#form-name").val(); },
            password: function () { return $("#form-password").val(); }

        };
        if ($("#form-name").val() == "" ||  $("#form-password").val()=="")
        {
            // alert("error");

           Error(true);
        }
     });
    });
  </script>

<!DOCTYPE html>
 <html>
     <head>
  <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title </title>
<link href="~/Content/login.css" rel="stylesheet" type="text/css" />

<link href="~/Content/box.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">                  </script>
    </head>
   <body>
<div class="container">
    <div class="login-form">
        <div >
            <img class="login-logo" src="~/images/hn-logo.png" />
            <div id="Not"></div>
            <div class="input-login">
                @RenderBody()
                </div>
            </div>
          </div>

     </div>

    <script src="~/Js/Notifcation.js"></script>
</body>
</html>