ここに私のモーダルコードがあります:
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
モーダルに関連する JavaScript は次のとおりです。
$('#myModal').on('hidden', function () {
$(this).removeData('modal');
});
$("a[data-toggle=modal]").click(function (e) {
lv_target = $(this).attr('data-target')
lv_url = $(this).attr('href')
$(lv_target).load(lv_url)});
ここに私のリンクコードがあります:<a href="http://localhost:3000/hints/found_sentences?word=创造" class="old_hint" data-remote="true" data-target="#myModal" data-toggle="modal">造</a>
リンクをクリックすると、div だけでなくすべての div が置き換えられて表示され"modal-body"
ます。つまり、Modal header
リモート コンテンツの上には表示されません。
ここにjsfiddleがあります。読み込まれるコンテンツは無視してください。modal-header と modal-footer のコンテンツが表示されないことに注意してください。