动态创建Bootstrap Modal得到错误的高度

时间:2017-01-15 08:17:13

标签: javascript jquery html twitter-bootstrap bootstrap-modal

我试图在JQuery ajax调用之后创建一个模态并用模板填充它,但模态没有高度。只有当我在show.bs.modal事件中手动添加高度时,才能得到我想要的结果。

$('span[data-toggle="filemanager"]').click(function( event ) {

  $('#modal-filemanager').remove();

  $.ajax({
    url: "<?php echo site_url("filemanager/view")?>",
    dataType: 'html' })
    .done(function(data) {
      $('body').append('<div id="modal-filemanager" class="modal">' + data + '</div>');
      /* only with this code i get height on my modal */
      $('#modal-filemanager').on('show.bs.modal', function () {
       $(this).find('.modal-body').css({
          height: ($( window ).height()*0.7)
       });
      });
      /* */
      $('#modal-filemanager').modal('show');          
    })
    .fail(function(data) {
      console.log(data);
    });
 });

模板:

<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  <h4 class="modal-title">Filemanager</h4>
</div>
<div class="modal-body">
<div row="row">
    <?php if(isset($directories)) { ?>
    <?php foreach($directories as $directory) { ?>
    <div class="col-sm-3 col-xs-6 text-center">
        <div class="col-sm-12">
            <a href="<?php echo site_url("filemanager/load").'?path='.$path.'/'.$directory->name; ?>" class="directory"><i class="fa fa-folder fa-5x"></i>
            </a>
        </div>
        <div class="col-sm-12">
            <label>Folder Name
            <?php //echo $directory->name; ?>
            </label>
        </div>          
    </div>
    <?php } ?>
    <?php } ?>
</div>
</div>
</div>

屏幕截图首先显示我的问题,第二个显示添加css后的结果:

enter image description here

enter image description here

提前感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

我无法相信我的问题是语法错误。我有div row="row"而不是class="row"。无论如何,谢谢你的帮助。