Question

我有这样一张桌子：

我想按下（Button1）结果为：

当我按下（Button2）结果为：

Hi level html模拟：

<div id="item-warapper">
    <div id="item-header">  
        <label>Entity Title</label>
    </div>
    <div id="item-detail">
        <table>
            <thead>
                <tr>
                    <td>detail ID</td>
                    <td>detail Quantity</td>
                    <td>detail Value</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <tr id="row1">
                        <td>
                            001
                            <button>Open Detail</button>
                        </td>
                        <td>5.00</td>
                        <td>200.00</td>
                    </tr>
                    <tr id="row2">
                        <td>002</td>
                        <td>7.00
                            <button>Quantity Details</button>
                        </td>
                        <td>300.00</td>
                    </tr>                   
                    <tr id="row3">
                        <td>003</td>
                        <td>9.00</td>
                        <td>
                            500.00
                            <button>Value Details</button>
                        </td>
                    </tr>                                       
                </tr>
            </tbody>
        </table>
    </div>  
    <div>
        <div id="detail-item-view">
            <!-- Some detail -->
        </div>
        <div id="detail-quantity-view">
            <!-- Some detail -->
        </div>      
        <div id="detail-value-view">
            <!-- Some detail -->
        </div>              
    </div>
</div>

Answer 1

Twitter的bootstrap已经解决了这个问题。在这里看看这个：getbootstrap.com/javascript/#collapse

我在这里创建了一个小例子：

＆＃13;

* {
  box-sizing: border-box;
}
.container {
  padding: 25px;
  width: 100%;
  background-color: #FEFEFE;
  border: 1px dotted #BEBEBE;
}
.container-row {
  background-color: #DEDEDE;
}
.container-row:last-child {
  text-align: right;
}
.container-row + .container-row {
  margin-top: 15px;
}

＆＃13;

<!-- Ressources -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- Example -->
<div class="container">
  <div class="container-row">
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
      Button 1
    </button>
    <div class="collapse" id="collapseExample">
      <div class="inner">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
        sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
        ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </div>
    </div>
  </div>
  <div class="container-row">
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample">
      Button 2
    </button>
    <div class="collapse" id="collapseExample2">
      <div class="inner">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
        sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
        ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </div>
    </div>
  </div>
</div>

＆＃13;

我希望这就是你要找的东西。

最好的问候。

Answer 2

您的叠加层必须绝对位于按钮的底部。您可以使用以下Jquery找到按钮的底部：

$('button').click(function() {
    // show the overlay
    $('#overlay').toggleClass('active');
    // calcs bottom of button 
    var bottom = $(this).position().top + $(this).outerHeight(true);
    $('#overlay').css({
        'top': bottom + 'px',

    });
});

这是一个用于证明我的意思的代码：http://codepen.io/NeilWkz/pen/LZGvZP

注意：当你定位叠加时，绝对要确保你在包含表和叠加标记的父包装器上有一个相对位置（在我的例子中，我将它添加到主体中）。

编辑：我写完这篇文章之后你已经添加了标记，但这应该证明原理。

css全宽模态覆盖按钮下方

2 个答案: