Question

我正在使用jschr bootstrap模式插件（https://github.com/jschr/bootstrap-modal）在我的网站上创建模态。首先，我喜欢这个插件，它让模态做了我希望它做的所有很酷的东西，但是我正在使用以下方式的模态，这不是我想要的方式：

基本上，当模态包含制表符时，我想在模态上实现动态位置。因此，在下面的示例中，无论其他选项卡中的内容长度如何，模式当前始终都会设置为@第一个活动选项卡的位置。基本上，我所追求的是当模式更改为模态以重新定位到窗口的中心时，它的新高度...有关如何实现此目的的任何想法？

<a href="#CustomerDetailsModal" data-toggle="modal">Open modal</a>

<div id="CustomerDetailsModal" class="modal hide" >
<div class="modal-header">
    <button data-dismiss="modal" class="close" type="button">×</button>
    <h3>Customer Details</h3>
</div>
<div class="modal-body" >
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#CustomerDetails">MY CUSTOMER</a></li>
<li ><a data-toggle="tab" href="#Users">Users</a></li>
<li ><a data-toggle="tab" href="#Activity">OUTRAGEOUSLY LONG CONTENT HERE.</a></li>
</ul>
<div class="tab-content" id="customerdetails" >

<div id="CustomerDetails" class="tab-pane active" >

<div class="form-horizontal">
    <div class="control-group">     
    <div class="control-label">
            Company
    </div>
    <div class="controls">
        <span class="detailsDisplay">CUSTOMER INFO</span>
    </div>
</div>
    <div class="control-group">     
    <div class="control-label">
            CompanyAlias
    </div>
    <div class="controls">
        <span class="detailsDisplay"></span>
    </div>
</div>
    <div class="control-group">     
    <div class="control-label">
            Address
    </div>
    <div class="controls">
        <span class="detailsDisplay">123 ME ST</span>
    </div>
</div>
    <div class="control-group">     
    <div class="control-label">
            City
    </div>
    <div class="controls">
        <span class="detailsDisplay">SURFSIDE BEACH</span>
    </div>
</div>
    <div class="control-group">     
    <div class="control-label">
            State
    </div>
    <div class="controls">
        <span class="detailsDisplay">SC</span>
    </div>
</div>
    <div class="control-group">     
    <div class="control-label">
            Zip
    </div>
    <div class="controls">
        <span class="detailsDisplay">29575</span>
    </div>
</div>
    <div class="control-group">     
    <div class="control-label">
            Phone
    </div>
    <div class="controls">
        <span class="detailsDisplay">555-555-5555</span>
    </div>
</div>
    <div class="control-group">     
    <div class="control-label">
            Bill To Email
    </div>
    <div class="controls">
        <span class="detailsDisplay">CUSTOMER@EMAIL</span>
    </div>
</div>
</div>
</div>
<div id="Users" class="tab-pane" >
<table class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>Create Date</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>E-mail</th>
        </tr>
    </thead>
    <tbody>
        <tr>
                <td>9/9/2013 10:14:48 PM</td>
                <td>MY</td>
                <td>CUSTOMER</td>
                <td>CUSTOMER@EMAIL.COM</td>
        </tr>
    </tbody>
</table>
</div>
<div id="Activity" class="tab-pane" style="padding: 0; margin: 0;">
<table class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>Date</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD>
        <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD>
        <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD>
        <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD>
        <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD>
        <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD>
        <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD>
        <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD>
        <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD>
        <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD>
        <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD>
        <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD>
        <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD>
        <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD>
        <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD>
        <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD>
        <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD>
        <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD>
        <TR><TD>SOME CONTENT</TD><TD>SOME MORE CONTENT</TD>
    </tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
    <a data-dismiss="modal" class="btn" href="#">Close</a>
</div>
</div>

JSFiddle：我添加了一个你可以到达的小提琴：http://jsfiddle.net/valvemail/ML6Xp/3/

不幸的是，由于模态打开停靠在小提琴浏览器窗口顶部的东西，所以我的表现很糟糕....所以，在小提琴中，高度是动态的，但位置不是.. ..

谢谢！

Answer 1

所以，今天一个类似的精神遇到了类似的问题，并发布在bootstrap modal的github上。解决方案是https://github.com/jschr/bootstrap-modal/issues/207

/* after the tab changes:
$("#CustomerDetailsModal").modal('layout');

和presto chango它重新登记。

带有标签动态位置/高度的Bootstrap模态

1 个答案: