monaca タブ移動したページでmodalが使用できない
monacaでタブでpage2に移動した際にボタンを押すとmodalを表示したいのですが
http://ja.onsen.io/reference/ons-modal.html
こちらを参考に入れてみたのですが全く動きません・・
ご教授いただけますでしょうか。
index.html
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script>
<script src="js/app.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
ons.bootstrap()
$(document.body).on("pageinit", '#my-page', function() {
$("#show-modal", this).click(function() {
modal.show();
setTimeout('modal.hide()', 2000);
});
});
</script>
</head>
<body>
<ons-tabbar var="tabbar">
<ons-tabbar-item page="navigator.html" active="true">
<div class="my-icon"><img class="nav_img" src="img/icon01.png" alt="HOME" width="36" /></div>
</ons-tabbar-item>
<ons-tabbar-item page="page2_in.html">
<div class="my-icon"><img class="nav_img" src="img/icon02.png" alt="ITEM" width="36" /></div>
</ons-tabbar-item>
</ons-tabbar>
<ons-template id="navigator.html">
<ons-navigator title="Navigator" var="myNavigator" page="page1.html">
</ons-navigator>
</ons-template>
<ons-template id="page2_in.html">
<ons-navigator title="Navigator" var="myNavigator" page="page2.html">
</ons-navigator>
</ons-template>
</body>
</html>
page2.html
<ons-page id="my-page">
<ons-toolbar fixed-style>
<div class="center">ITEM</div>
</ons-toolbar>
<div ons-loading-placeholder="start.html">
アプリケーションの読み込みを行っています...
</div>
<ons-template id="start.html">
<ons-button id="show-modal" modifier="light">Open Modal</ons-button>
</ons-template>
<ons-modal var="modal">
<ons-icon icon="ion-load-c" spin="true"></ons-icon>
<br>
<br> Please wait.
<br>Closing in 2 seconds.
</ons-modal>
</ons-page>