任何方式讓這個div彈出其父母，同時保持滾動？

Question

在這裏看到：http://jsfiddle.net/FUdcU/1/

有沒有辦法讓.fake降顯示.modal體的底部外面和在.modal英尺，同時仍然在.modal-保留垂直滾動身體？

HTML：

<div aria-hidden="false" class="fade hide modal in" id="modal" role="dialog" tabindex="-1" style="display: block;"> 
    <form accept-charset="UTF-8" action="" class="form-horizontal progressify" enctype="multipart/form-data" id="video-form" method="post"> 
    <div class="modal-header"> 
     <button aria-hidden="" class="close" data-dismiss="modal" type="button">×</button> 
     <h3>header</h3> 
    </div> 

    <div class="modal-body"> 
     <div id="drop-container"> 
     <input type="text" id="text"/> 
     <div class="fake-drop"> 
      <div class="drop-row">some row1</div> 
      <div class="drop-row">some row2</div> 
      <div class="drop-row">some row3</div> 
      <div class="drop-row">some row4</div> 
      <div class="drop-row">some row5</div> 
      <div class="drop-row">some row6</div> 
      <div class="drop-row">some row7</div> 
      <div class="drop-row">some row8</div> 
      <div class="drop-row">some row9</div> 
      <div class="drop-row">some row0</div> 
      <div class="drop-row">some row11</div> 
      <div class="drop-row">some row12</div> 
      <div class="drop-row">some row13</div> 
      <div class="drop-row">some row14</div> 
      <div class="drop-row">some row15</div> 
      <div class="drop-row">some row16</div> 
      <div class="drop-row">some row17</div> 
      <div class="drop-row">some row18</div> 
      <div class="drop-row">some row19</div> 
      <div class="drop-row">some row20</div> 
     </div> 
     </div> 

     <h4>hey look, there's content under here!</h4> 
     <h4>hey look, there's content under here!</h4> 
     <h4>hey look, there's content under here!</h4> 
     <h4>hey look, there's content under here!</h4> 
     <h4>hey look, there's content under here!</h4> 
     <h4>hey look, there's content under here!</h4> 
     <h4>hey look, there's content under here!</h4> 
     <h4>hey look, there's content under here!</h4> 
     <h4>hey look, there's content under here!</h4> 
     <h4>hey look, there's content under here!</h4> 
    </div> 

    <div class="modal-footer"> 
     <a aria-hidden="true" class="btn" data-dismiss="modal" tabindex="-2">Cancel</a> 
     <input class="btn btn-primary" name="commit" type="submit" value="Save"> 
    </div> 
    </form> 
</div> 

CSS：

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); 

.container { 
    margin-top: 10px; 
} 
h4{ 
    margin-top: 50px; 
} 
form{ 
    margin-bottom: 0; 
} 
.drop-container{ 
    position: relative; 
} 
.fake-drop{ 
    background-color: #fff; 
    border: 1px solid #ccc; 
    width: 250px; 
    position: absolute; 
    top: 50px; 
    left: 15px; 
    box-shadow: 1px 3px 10px 1px #ccc; 
} 
.drop-row{ 
    padding: 2px 5px; 
} 
.drop-row + .drop-row{ 
    border-top: 1px solid #ddd; 
} 

Answer 1

.modal-body { 
position: relative; 
height: 200px; 
} 

.fake-drop{ 
position: fixed; 
top: 105px; 
left: 30px; 
} 

，如果我理解你問。 根據需要更改變量。

http://jsfiddle.net/FUdcU/4/

與jQuery scrollTop的

http://jsfiddle.net/FUdcU/5/