Question

我有一张图片，如果你点击图片，它就像一个按钮，打开一个带有表格的叠加窗口。用户可以提交用户名和密码并提交并关闭表单。这就是我所拥有的：

形式：

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

确定！对不起所有的代码，但我很难过。如何将此表单弹出窗口正确放置在页面中间，并使其宽度和高度都很好，以便在网站上看起来真实无缝。

感谢您的帮助！

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

Javascript弹出窗体

1 个答案: