CakePHP - モーダルレイアウトを持つ方法

Question

私は動的にモーダルにコンテンツをロードしています。そして、しばしば私のサイト上では通常アクセス可能なページになります。

私はそのコントローラ/アクションを再利用してモーダルにロードできるようにしたいと思いますが、コントローラは既にレイアウトを使用しています。だから私のモーダルにページをロードすると、私のサイトのヘッダーとフッターが再びモーダルになります。私は望んでいません。

---

一つの解決策私はそれがうまくいくかもしれないと思ったが、汚い回避策のように思える、私のAppControllerで、それは、ページのモーダル呼び出し（ではない通常の呼び出しであると言いURLパラメータのチェックを持つことです）。次に、特別なモーダルなものでレイアウトを上書きします。だから私は私の通常のレイアウトのCSSのすべてを再定義する必要はありませんが、私はちょうど部分を隠すことができ

// modal_layout.css 

@import url("normal_layout.css"); 

.header, .footer {display:none;} 

：

//app_controller.php 

public function beforeRender() { 
    if (isset($this->params['passed']['_modal'])) { 
     $this->layout = 'modal'; 
    } 
} 

// In my jQuery call to open the modal: 

myModal.load('users/view/5/_modal').dialog('open'); 

はその後modal.ctpレイアウトで、私のようなものに見えるスタイルシートが含まれるであろう私は見せたくありません。

これはちょっとばかげたやり方ですが、それがうまくいくかどうかわかりませんが、確かに誰かがこれをCakePHPでやらなければならなかったので、どうしたらいいですか？

Answer 1

私はそれほど複雑ではありませんでした。私は単に私のレイアウトで隠されたdivの作成：

<div id="modal"></div> 

をそして、私のレイアウトの既存のCSSで私は、ページがモーダルにロードされたときに表示したくない要素を隠すために特定のルールを追加しました：

#header, #footer {display:none;} 

このように私はモーダルにページを読み込むことができますが、まだレイアウトのCSSで定義されているすべての通常のスタイルがあります。ページは、それらの通常のCakePHPのURLを使用してモーダルにロードされています

$('#modal').load('controller/action/param:whatever').dialog('open'); 

Answer 2

要素を作成できます。

$('#myModal').load("<?=url('users/view/5/_modal')?>", {type:'post'}, function(){ 
      $('#myModal').dialog({title:'open',autoOpen:false, modal:false, height:600, width:700}); 
      $('#myModal').dialog('open'); 
     }); 

function view($my_customer_id, action) { 
//do stuff here 
$this->render(DS.'elements'.DS.'users'.DS.'modal'); 
} 

Answer 3

ajaxリクエストを検出するためのRequestHandlerを使用します。あなたの行動の最後にこの行を入れてください：

if ($this->RequestHandler->isAjax())$this->render('view_name','ajax'); 

Answer 4

あなたはモーダルダイアログボックスの内容は、あなたは、単に以下を追加する必要があるアクションのビューの単純内容になりたい場合はコントローラのアクションのトップ：

$this->layout = null; 

このビューのレイアウトとすべての出力内容{HTML}を無効にします今

Answer 5

if ($this->request->is('ajax')) { 
    $this->layout = 'ajax';    
} 

あなたはあなたのようレイアウト/ ajax.ctpを設定することができますあなたは欲しい。