자바 스크립트 팝업 양식

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 :

012,351,641을 여기에 내가 무엇을 가지고

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