ウェブサイトの残りの部分がまだバックグラウンドにある状態で、ライトボックスにdjangoビューを表示するにはどうすればよいでしょうか。
実際、FormView を「ポップアップ」するモーダルjQueryダイアログを作成し、キャンバスをページ全体の背景として使用するサイトの残りの部分を保持したいと考えています。モーダル フォームを示す jQuery デモを見たことがありますが、ダイアログでビューをレンダリングする方法がわかりません。
ビューからテンプレートをレンダリングする場合、2 つのオプションのいずれかを実行できます。
キャンバス全体のページ背景を持つメイン テンプレートをテンプレートで拡張し、必要な追加情報を適切にフォーマットされた div にレンダリングして、モーダルに変換することができます。
2 番目のオプションは、モーダル マークアップをメイン テンプレートに配置し、ビューからデータをロードしてモーダルに動的に配置する ajax 関数を用意することです。
方法例 1.
HTML
main_template.html
<html>
<head>.....</head>
<body>.....{% block modal_block %}</body>
<script>
$(function() {
$( "#myModal" ).dialog({
modal: true
});
});
</script>
</html>
modal_template.html
{% extends 'main_template.html' %}
{% block modal_block %}
<div id="myModal"></div>
{% endblock %}
このメソッドでは、ビューで modal_template.html をレンダリングします。これにより、メイン コンテンツだけでなく追加のモーダル div も含む html ページが作成されます。その後、ビュー/テンプレート内で必要なテンプレートの書式設定を行うことができます。
方法例 2
<html>
<head>.....</head>
<body>.....</body>
<script>
$(document).ready(function(){
$.get('views_url',function(data){
var myModal = $(data);
$('body').append(myModal);
$( myModal ).dialog({
modal: true
});
});
});
</script>
</html>
この場合、ビューからモーダルの html をレンダリングするだけです。