Javascript弹出表单

我有一个图像，如果你点击该图像，它就像一个按钮，打开一个带有表单的覆盖窗口。用户可以提交用户名和密码，然后提交并关闭表单。以下是我所拥有的：

表格：

CSS:

好的！对不起，所有的代码，但我难住了。如何在页面中间适当地将这个表单弹出中心，并使它具有良好的宽度和高度，使其在网站上看起来很无缝。

---

谢谢你的帮助

你能把你的代码贴在js提琴上吗？什么是js提琴？你发布你的代码并分享：）如果我能帮助你，请接受我的回答：）。

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>

<li>
                <a href="#Contact">
                    <INPUT type=image src="http://i.imgur.com/UhxJY84.png" style="height:auto;width:100%" />
                </a>
                </li>

      $(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");

    }

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

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