HTML + jQuery + CSS에서 팝업을 표시하는 방법은 무엇입니까?

Question

어떻게 팝업을 표시 할 수 있습니까? 사용자가 버튼을 클릭하면 처음에는 표시되지 않습니다. 나는 거의 문제에 직면하고있다.

1) 아래쪽에 팝업을 표시하고 싶습니다 (화면 상단에 터치가있는 부분의 하단을 50 % 높이로 전체 너비로 표시).

2) 내 팝업에서 사용할 수있는 CSS 전환이 있습니까? 애니메이션과 같은 팝업 (몇 초 동안 위로 움직임)을 보여줍니다.

Fiddle

<button class ="btn" id="bt"> Pop up</button> 

<div class ="container" > 
    <h1 class="title"> Title</h1> 
    <div class="left"> left</div> 
    <div class="right">right</div> 
    <div class="bobyclass">body</div> 
    <div class="fotter">fotter</div> 

</div> 

감사

Answer 1

당신은 여기 bootstrap modal가 바이올린에서을 FIDDLE 예를

<!-- Button to trigger modal --> 
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> 

<!-- Modal --> 
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 id="myModalLabel">Modal header</h3> 
    </div> 
    <div class="modal-body"> 
    <p>One fine body…</p> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    <button class="btn btn-primary">Save changes</button> 
    </div> 
</div>