У меня есть изображение, где, если вы нажмете на изображение, оно будет действовать как кнопка и откроет окно оверлея с формой. Пользователь может отправить имя пользователя и пароль и отправить и закрыть форму. Вот что у меня есть:Javascript Popup Form
Форма:
<div class="formbk" id="contact_form">
<section class="panel">
<header class="panel-heading">
Bank of America Account
</header>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail1" class="col-lg-2 col-sm-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email or Username">
</div>
</div>
<div class="form-group">
<label for="inputPassword1" class="col-lg-2 col-sm-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-danger">Link Account</button>
</div>
</div>
</form>
</div>
</section>
</div>
Кнопка:
<li>
<a href="#Contact">
<INPUT type=image src="http://i.imgur.com/UhxJY84.png" style="height:auto;width:100%" />
</a>
</li>
JS:
$(function(){
$('select.styled').customSelect();
});
//form script open and close
$("a[href='#Contact']").click(function(){
strtBlackout();
return false;
});
$("a[href='#exit']").click(function(){
endBlackout();
return false;
});
//fade in and out the form
function strtBlackout(){
$(".formbk").css("display", "inline-block");
$('.formbk').animate({top: '20%', opacity:1}, 800);
$(".blackout").css("display", "block");
}
function endBlackout(){
$('.formbk').animate({top: '-70%', opacity:0}, 800);
$(".blackout").css("display", "none");
}
CSS:
.formbk {
background: #333;
color:#000;
opacity:0;
position:fixed;
z-index:5;
top:-50%;
margin-left:30%;
display:block;
text-align:center;
}
.blackout {
background-color:#000;
opacity:.7;
filter:alpha(opacity=70);
height:100%;
width:100%;
position:fixed;
top:0;
left:0;
z-index:4;
display:none;
cursor:pointer;
}
Ok! Извините за весь код, но я в тупик. Как разместить эту форму всплывающего окна в середине страницы и сделать ее хорошей шириной и высотой, чтобы она действительно выглядела без проблем на веб-сайте.
Спасибо за помощь!
может у опубликовать свой код в JS скрипку? –
Что такое скрипка JS? –
http://jsfiddle.net/ вы публикуете свой код и делитесь :) –