4

本文の最後に定義済みのモーダル マークアップを挿入するコードをここに示します。

var languageModal = 
'<div id="lngModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="lngModalLabel" aria-hidden="true">'+
'   <div class="modal-body"></div>'+
'   <div class="modal-footer">'+
'       <form class="inline" id="lngModalForm">'+
'           <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">'+
'               <span lang="hu"'+((langAfterInit == 'hu') ? '' : ' style="display:none;"')+'>Bezárás</span>'+
'               <span lang="en"'+((langAfterInit != 'hu') ? ' style="display:none;"' : '')+'>Close</span>'+
'           </button>'+
'       </form>'+
'   </div>'+
'</div>';

$('body').append(languageModal);

しかし、.modal()それを呼び出すと、ロードされず、黒いオーバーレイのみが表示されます:

$('#lngModal').modal({
    backdrop    : 'static',
    keyboard    : false,
    remote      : '/language.html',
});

で試してみまし.on('modal',{...})たが、うまくいきませんでした。

4

4 に答える 4

1

@Badaboooooomと@ ic3b3rgから多くの助けを得た後、スクリプトマークアップ.modal({... remote : '...', ..})のdata-remote="..."タグと交換する必要があり、.fadeからも削除する必要がありました#lngModal。

var languageModal =  '<div id="lngModal" class="modal hide"  data-remote="/language.html">'+
//other stuff

$('#lngModal').modal('show',{
    backdrop: true,
    keyboard: false,
});
于 2013-01-01T22:51:13.427 に答える
1

これを試して：

    $('body').append(languageModal,function(){
console.log('modal appended');
    $('#lngModal').modal({
                    backdrop    : 'static',
                    keyboard    : false,
                    remote      : '/language.html',
                }); 

console.log('modal init');
    });

それ以外の

$('body').append(languageModal);
            $('#lngModal').modal({
                backdrop    : 'static',
                keyboard    : false,
                remote      : '/language.html',
            });
于 2013-01-01T20:48:54.983 に答える
1

あなたのコードは機能します。ブートストラップCSSを読み込んでいますか?

http://jsfiddle.net/xjCAN/

コードなしでこれを投稿することはできません：

' Nothing, really
于 2013-01-01T21:14:44.713 に答える
0

私も一度持っていましたが、次のcssを使用してモーダルサイズに増やしたい場合に限りました。

var modal = $('#lngModal');
modal.css({
   width: '60%',
   left: '20%',
   margin: 'auto auto auto auto',
   top: '10%'
});

：に設定max-heightして修正しましたmodal-body

var modalBody = modal.children('.modal-body');

modalBody.css({
   maxHeight: '800px'
});

モーダルCSSを変更しましたか？

于 2013-01-01T20:24:04.273 に答える