SO http://is.gd/YLMtOq
HTML
<div id="container">
<div class="LgnHeader"><span class="netbank"></span>
</div>
<br />
<form name="LgnForm" id="LgnForm" method="post" action="#" autocomplete="off">
<span id="loginContent">
<input id="inputEmail" type="text" placeholder="نام کاربری" />
<input id="inputPassword" type="password" placeholder="رمز عبور" name="pr:j_idt26" class="VK keyboardInput" />
<input id="staticPassword" type="password" placeholder="رمز ایستا" name="pr:j_idt26" class="VK keyboardInput" />
<input type="text" name="text" value="" id="captcha" placeholder="کد امنیتی" />
</span>
<span id="attensions">
<a href="#dialog" name="modal"><strong>توصیه های امنیتی</strong></a>
<p>دقت کنید که نشانی اینترنتی صفحه ای که در مقابل شماست <a href="https://ib.sb24.com">https://ib.sb24.com</a> باشد.</p>
<p>بانک سامان هیچگاه اطلاعات شخصی و بانکی شما از جمله نام، شماره حساب، موجودی، رمز و ... را به هیچ طریقی (ایمیل، تلفن یا پست) درخواست نمی کند.</p>
<p>از وارد کردن رمز و دیگر اطلاعات کاربری خود در هر پایگاهی به جز پایگاه رسمی بانک سامان خودداری کنید.</p>
<p>رمز ورود و دیگر اطلاعات کاربری شما کلید دسترسی به حساب شما هستند، آن ها را در اختیار دیگران قرار ندهید.</p>
<p>استفاده از این سامانه به معنای پذیرش شرایط استفاده است.</p>
<p>این سامانه از مرورگرهای ،Opera 9 ،FireFox 4 ،Internet Explorer 7 ،Google Chrome 12 و Safari 5.0 و بالاتر پشتیبانی می کند.</p>
<p>در استفاده از هر بخش تکمیل موارد ستاره دار الزامی می باشد.</p>
</span>
<br />
<div class="LgnBtn">
<input class="btn btn-info" type="button" value="ورود" id="submit"></input>
<p class="Alert"></p>
</div>
</form>
</div>
</div>
<div id="mask"></div>
</div>
CSS
#loginContent{
width:330px;
float:right;
}
#attensions{
width:330px;
float:left;
}
.LgnBtn{
clear:both;
}
@media (max-width: 790px){
#loginContent{
width:100%;
float:inherit;
}
#attensions{
width:100%
float:inherit;
}
}
body {
background: rgb(33, 154, 195);
background: url(data:image/svg+xml;
base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMyMTlhYzMiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMGMzODViIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, rgba(33, 154, 195, 1) 0%, rgba(12, 56, 91, 1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(33, 154, 195, 1)), color-stop(100%, rgba(12, 56, 91, 1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(33, 154, 195, 1) 0%, rgba(12, 56, 91, 1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(33, 154, 195, 1) 0%, rgba(12, 56, 91, 1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(33, 154, 195, 1) 0%, rgba(12, 56, 91, 1) 100%);
background: radial-gradient(ellipse at center, rgba(33, 154, 195, 1) 0%, rgba(12, 56, 91, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#219ac3', endColorstr='#0c385b', GradientType=1);
/* IE6-8 fallback on horizontal gradient */
height: 100%;
background-repeat: no-repeat;
margin: 0;
}
#container {
/*height: 380px;*/
width:...
JavaScript
var Login = function () {
$('#container').fadeIn('slow');
function init() {
$('input#submit').click(validateForm);
$('a[name=modal]').click(setModal);
$('input#close').click(function () {
$('#mask').hide();
$('.window').hide();
});
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
var $h = $('.LgnHeader').outerHeight(true) + $('#LgnForm').outerHeight(true) + 35;
$('#container').height($h);
$(window).resize(fixSize);
$('#loginContent input').focus(hideAlert);
$('#loginContent input').keydown(checkCapsLock);
}
function validateForm() {
$('#loginContent input').addClass('has-error');
$.each($('#loginContent input'), function (i, n) {
if ($(n).val() == '') $('.Alert').text('اطلاعات وارد شده صحیح نمی باشد.').fadeIn();
});
}
function checkCapsLock(e) {
var s = String.fromCharCode(e.which);
if (s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey) {
$('.Alert').text('کلید Caps Lock روشن می باشد.').fadeIn();
}
}
function hideAlert() {
$('#loginContent input').removeClass('has-error');
$('.Alert').text('').fadeOut();
}
function setModal(e) {
e.preventDefault();
var id = $(this).attr('href');
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$('#mask').css({
'width': maskWidth,
'height': maskHeight
});
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow", 0.8);
$(id).fadeIn(2000);
$('#dialog', '#boxes').height($('.dialogContent').outerHeight(true) + $('input#close').outerHeight(true));
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top', winH / 2 - $(id).outerHeight(true) / 2);
...