在 DIV expanded/collapsed 时动态调整 Bootstrap UI 模式

Question

我有以下 Bootstrap UI 模态模板，它在滚动中显示客户列表 DIV。

<div>
    <div class="modal-header">
        <h3 class="modal-title">Select a customer</h3>
    </div>
    <div class="modal-body">
        <div class="modal-container">
            <label data-ng-repeat="cust in customers">
                <input name="customer" type="radio" data-ng-value="{{cust}}" value="{{cust}}" data-ng-checked="{{cust}}.name==$parent.selected.item.name" ng-model="$parent.selected.item" />{{cust.name}}<span class="text-muted">&nbsp;-&nbsp;{{cust.address}}</span>
            </label>
        </div>
        <div class="modal-footer">
            <button class="btn btn-success pull-left" data-ng-click="new()">New</button>
            <button class="btn btn-primary" data-ng-click="ok()">OK</button>
            <button class="btn btn-default" data-ng-click="cancel()">Cancel</button>
        </div>
        <div id="newCustomer" class="collapse">
            <div class="form-group">
                <label for="customerName" class="col-sm-5 control-label">Customer Name</label>
                <div class="col-sm-5">
                    <input id="customerName" class="form-control" type="text" data-ng-model="newCustomer.name" placeholder="New customer name" />
                </div>
            </div>
            <div class="form-group">
                <label for="customerAddress" class="col-sm-5 control-label">Address</label>
                <div class="col-sm-5">
                    <input id="customerAddress" class="form-control" type="text" data-ng-model="newCustomer.address" placeholder="New customer address" />
                </div>
            </div>
        </div>
    </div>
</div>

底部有New、OK、Cancel三个按钮。我想要发生的是当单击 New 按钮时， newCustomer div 块应该在展开和折叠状态之间切换，重要的是调整模态大小，以便在展开时模态将调整大小以适应 div 块占用的 space，并在折叠 div 块时缩小模式。

这可以使用纯 Bootstrap 和 AngularJS 解决方案来完成吗？

我正在使用 Bootstrap v3.3.1 和 AngularJS v1.3.9。

Answer 1

我要做的是在您的模态中实际使用 bootstrap collapse。这样你就可以用 boostrap 完成所有事情了。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <label data-ng-repeat="cust in customers">
            <input name="customer" type="radio" data-ng-value="{{cust}}" value="{{cust}}" data-ng-checked="{{cust}}.name==$parent.selected.item.name" ng-model="$parent.selected.item" />{{cust.name}}<span class="text-muted">&nbsp;-&nbsp;{{cust.address}}</span>
        </label>
<div class="collapse" id="collapseExample">
  <div class="well">
     <div class="form-group">
       <label for="customerName" class="col-sm-5 control-label">Customer Name</label>
       <div class="col-sm-5">
         <input id="customerName" class="form-control" type="text" data-ng-model="newCustomer.name" placeholder="New customer name" />
       </div>
     </div>
     <div class="form-group">
        <label for="customerAddress" class="col-sm-5 control-label">Address</label>
        <div class="col-sm-5">
           <input id="customerAddress" class="form-control" type="text" data-ng-model="newCustomer.address" placeholder="New customer address" />
        </div>
      </div>
  </div>
</div>
      <div class="modal-footer">
<button class="btn btn-success" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  NEW BUTTON
</button>
        <button class="btn btn-primary" data-ng-click="ok()">OK</button>
        <button class="btn btn-default" data-ng-click="cancel()">Cancel</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

http://jsfiddle.net/tea6gj4e/1/

在 DIV expanded/collapsed 时动态调整 Bootstrap UI 模式

Dynamically resize a Bootstrap UI modal when DIV expanded/collapsed

angularjs

twitter-bootstrap-3