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">×</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を追加した後の結果を示して示しています
ご協力いただきありがとうございます!
あなたはCSSを共有する必要があります。 – cinnaroll45
ご関心をお寄せいただきありがとうございます。まあ私はモーダルのためのカスタムCSSがありません。それは単にブートストラップのデフォルトです。 –