モーダル（Modaal）の呼び出し先のhtml内にリンクを設置してウインドウを閉じずにファイルを切り替えたい

Question

モーダル系jQueryプラグインの「Modaal」を使用しています。
typeをajaxに設定してウインドウを開いた際に他のhtmlを呼び出すようにしました。

呼び出し先のhtml内にリンクを設置してモーダルウインドウ内でファイルを切り替えたい場合、どのようにすれば良いのかがわかりません。
（普通に<a href="パス">を使用するとページそのものが切り替わってしまいました…）

どのようにすれば実現できるのか教えていただけないでしょうか。

<nav>
  <p class="navtitle">PRODUCT LIST</p>
   <ul>
     <li><a class="btn modaal-ajax" href="02a.html">02-A</a></li>
     <li><a class="btn modaal-ajax" href="02b.html">02-B</a></li>
     <li><a class="btn modaal-ajax" href="02c.html">02-C</a></li>
   </ul>
</nav>

<script type="text/javascript">
	$('.modaal-ajax').modaal({
	    type: 'ajax'
	});
</script>

Answer 1

pjaxとか別の技術が必要に思います。
モーダルはあくまでそのページ内の要素を使っているだけですしね。
「画面遷移」ではなく「コンテンツだけを切り替える」

非表示にしておいてトグルするも良し
Ajaxでコンテンツ部分を取得して差し替えるも良し

Comments

[garudaflap]

回答有難うございます。
Ajaxでコンテンツ部分を取得して差し替える方法で実現可能なのであれば是非試してみたいのですが、方法をご存じでしょうか。

[m.ts10806]

まず「Ajaxでコンテンツ部分を取得」を調べてやってみてください。
指定先urlがhtmlでもそのまま取得できたはずです。

[m.ts10806]

でもモーダル内のコンテンツはajaxで取れてるんですよね？
同じですよ。取得するものと、取得したhtmlを入れる場所が変わるだけです

[garudaflap]

返信有難うございます。
modaal.jsにコードが書かれているの設定そのままなのでモーダル内のコンテンツの表示自体は問題なくできています。
誘導いただいたワードなどで参考サイトなどをみながら試したのですが、そもそも基礎知識が足りておらず理解が進まない状況で解決に至っておりません。折角お力添えいただいたのに申し訳ありません…。
試しに書き足してみたのが下記のコードです。
------------------------------------------------------------
$(function(){
var $content = $('.testarea');
$(document).on('click', '.testnavi a', function(event) {
event.preventDefault();
var link = $(this).attr("href");
});
});
------------------------------------------------------------
普通のリンクと同じくページ自体が切り替わってしまいました。