Javascript Popup Form

Question

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:

$(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! Sorry for all the code but I'm 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!

Answer 1

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;
  }