ブートストラップとjqueryを使用してdjangoテンプレートでモーダルダイアログを作成しています。次のようにダイアログが作成されます。これは、以下の画像のように見えるダイアログ(対話体がイベントに満たされている)ブートストラップを使用するときのボタンの間隔と余白3
<div id="dialog" class="modal" title="Edit" style="display:none">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">Review Uploaded Image</h4>
</div>
<div class="modal-body"></div>
<a href="#" class="btn btn-primary" id="test-event">Test</a>
<a href="#" class="btn btn-primary" id="test-event2">Test2</a>
<div class="modal-footer">
<a href="#" class="btn btn-success" id="save-event">Save</a>
</div>
</div>
</div>
</div>
問題は2つのtest
ボタンが束ねていることです私はボタンをダイアログの端から数ピクセル離れた位置に置いて、それらの間隔を広げたいと思っています。 CSSを変更せずにHTMl自体でこれを行うことは可能ですか?
第2に、私はこれらのボタンを次のようにダイアログフッターに移動すると考えましたが、ダイアログがどのように非常に予期しない方法で変わるかを変更しました。私はとフッターにボタンを愛する:あなたが見ることができるようにフッターの区切りが消えてしまったし、すべてがちょうど下に移動した
:
<div class="modal-footer">
<a href="#" class="btn btn-primary" id="test-event">Test</a>
<a href="#" class="btn btn-primary" id="test-event2">Test2</a>
<a href="#" class="btn btn-success" id="save-event">Save</a>
</div>
しかし、これは、ダイアログのようにのように表示します。何らかの理由でフォーム要素の残りの部分。
function EditDialog(pk) {
sessionStorage.setItem("pk", pk.toString());
$.ajax({
url: "{% url 'populatereviewform' %}",
method: 'GET',
data: {
pk: pk
},
success: function(formHtml){
//place the populated form HTML in the modal body
$("#dialog").modal({width: 500, height: 500});
$('.modal-body').html(formHtml);
$('#dialog').on('hidden.bs.modal', function() {
window.location.reload();
})
},
dataType: 'html'
});
return false;
}
だから、私は、モーダルに$('.modal-body').html(formHtml);
スニペットに入れたときはうまく見えます。http://www.bootply.com/oapRb5DCWG –
@RachelS huh .... ok、もっとテストして報告します。おそらくそれは、この問題を抱えているというダイアログ本体が後で埋められているからです... – Luca
おそらくモーダルのHTML全体を投稿しますか? –