[英]Javascript Popup Form
I have an image where if you click the image, it acts as a button and opens up an overlay window with a form. 我有一幅图像,如果您单击该图像,它将充当按钮并打开带有表单的叠加窗口。 A user can submit a username and password and submit and it closes out the form. 用户可以提交用户名和密码并提交,然后将其关闭。 Here is what I have: 这是我所拥有的:
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>
Button: 按钮:
<li>
<a href="#Contact">
<INPUT type=image src="http://i.imgur.com/UhxJY84.png" style="height:auto;width:100%" />
</a>
</li>
JS: 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: 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! 好! Sorry for all the code but im stumped. 对不起所有代码,但我很困惑。 How do I center this form popup properly in the middle of the page, and make it a nice width and height so that it really looks seamless on the website. 我如何正确地将此表单弹出窗口居中放置在页面中间,并使其具有良好的宽度和高度,以使其在网站上看起来确实无缝。
Thanks for the help! 谢谢您的帮助!
HTML:
<li>
<a href="#Contact">
<img src="http://i.imgur.com/UhxJY84.png" style="height:auto;width:100%">
</a>
</li>
<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>
CSS:
* {
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
.backout {
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;
}
.formbk {
margin: 0 auto;
left: 50%;
transform: translate(-50%, 0);
position: fixed;
background: #333;
color:#000;
opacity:0;
z-index:9999;
top:-50%;
display:block;
}
.panel {
margin-left: auto;
margin-right: auto;
position: relative;
width: 200px;
text-align: center;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.