2017-01-15 16 views
0

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

ご協力いただきありがとうございます!

+0

あなたはCSSを共有する必要があります。 – cinnaroll45

+0

ご関心をお寄せいただきありがとうございます。まあ私はモーダルのためのカスタムCSSがありません。それは単にブートストラップのデフォルトです。 –

答えて

0

私の問題は構文エラーではないと信じています。私はclass="row"ではなくdiv row="row"でした。とにかく助けてくれてありがとう。

関連する問題