Edited at

Magnific Popup で開いたmodalとのデータのやりとり

More than 1 year has passed since last update.

Magnific Popup というのがあって、

Magnific Popup

ちょっとしたmodal処理用に結構使われてるみたいなんだけども、まあ、その使い方です。

まず、親になる画面の上のなにかをクリックするとモーダルが開けばいいので、

<div id="myDiv"><a class="popup" href="modal.php">なにか</a></div>

に対して、

$('.popup').magnificPopup({});

とする。実際には、

    $('.popup').magnificPopup({

type: 'iframe',
disableOn: 200,
mainClass: 'mfp-fade',
removalDelay: 200,
preloader: false,
fixedContentPos: false,
callbacks: {
open: function(){
},
close: function(){
}
}
});

こんな感じでオプションとコールバックを設定する。

で、上記のように、typeiframe にすると、

<a class="popup" href="modal.php">

で指定したhrefのリンク先を、modalとしてiframeを生成したその中に表示するような仕組みになっているので、そのmodal(つまりiframeの中身)をjqueryで操作するには、例えば

$('.mfp-iframe').contents().find(':hidden');

というようにやらないといけない。

ここで mfp-iframe というのは勝手に作られるiframeのクラス名だ。

なので callbacks のopenとかcloseの中で $('.mfp-iframe').contents() を使って、

modal上のformのvalueを取得して、

元々のウインドウのformのvalueにコピーするとか、あとはいろいろ、好きにやればいい。

ちなみに、modalの中に表示される画面、つまりmodal.phpだが、ここになんか動的に引数を渡したいってケースもあると思う。そういう時どうしたらいいのか?

callbacksの中に

            elementParse: function(item) {

},

というのを作る。こうするとこのitemの中に、開くmodalについての情報が入って、

item.src

でこの呼び出されるmodal.phpのURLが格納されているのだ。

なのでこいつに引数をくっつけてやればいよい

        callbacks: {

elementParse: function(item) {
item.src = item.src + '/val=123';
}
}

みたいに。