Question

有没有办法让.fake-drop显示在.modal-body底部和.modal-footer之外，同时仍保留.modal-body中的垂直滚动？

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/

有什么方法可以让这个div在保留滚动的同时弹出它的父节点？

1 个答案: