Question

当我显示我的模态时，我只输入文本和按钮，方案是：

当我点击按钮时，我根据输入文本中的内容搜索结果，结果显示在按钮下方的表格中。

我的表格显示但在模态之外（模态的高度不变）

我试图应用此解决方案，但它不起作用：

re-size the modal dialog in bootstrap dynamically

这是我的代码：

HTML：

<div id="dialogEtablissement" role="dialog" class="modal in" aria-hidden="false" data-backdrop="static" data-keyboard="true" aria-labelledby="basicModal">
            <div class="modal-dialog modal-md">
                <form method="post" action="#" class="form-horizontal clearfix">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Recherche d'un établissement</h4>
                    </div>
                    <div class="modal-content modal-content-correct">
                        <div class="modal-body">
                            <dl class="dl-horizontal">
                                <dt>Nom de l'établissement contient :</dt>
                                <dd><input type="text" id="idNomEtab" class="form-control" style="width:40%;display:inline;"/></dd>
                            </dl>
                        </div>
                        <div class="col-md-12 text-center"> 
                            <a id="idSearchEtablissement" class="btn btn-primary" href="javascript:searchEtablissement()">Rechercher</a> 
                        </div>
                    </div>
                    <div id="grid"></div>
                    <div class="modal-footer">
                        <div class="text-right">
                            <input type="button" name="Fermer" value="Fermer" onclick="$('#dialogEtablissement').modal('hide');" class="btn btn-danger"/>
                        </div>
                    </div>
                </form>
            </div>
        </div>

JS：

function showModalEtablissement(){
    $('#dialogEtablissement').modal('show');
    $('#dialogEtablissement').on('show', function () {
        $(this).find('.modal-body').css({
            width:'auto',
            height:'auto', 
            'max-height':'100%'
        });
    });
}

结果在这里添加：

$("#grid").append('<table class="table">');
$("#grid").append('<thead>');
$("#grid").append('<tr><th>Nom</th><th>Rue</th><th>Code Postal</th><th>Ville</th></tr>');
$("#grid").append('</thead>');

$("#grid").append('<tbody>');
for (i = 0; i < liste.length; i++) {
    $("#grid").append('<tr id="' +liste[i].id+ '">');
    $('#grid').append('<td>' + liste[i].nom+ '</td>');
    $('#grid').append('<td>' + liste[i].adresseLibelle+ '</td>');
    $('#grid').append('<td>' + liste[i].adresseCodePostal+ '</td>');
    $('#grid').append('<td>' + liste[i].adresseVille+ '</td>');
    $("#grid").append('</tr>');
}
$("#grid").append('</tbody>');
$("#grid").append('</table>');

Bootstrap动态调整模态的高度

0 个答案: