17892


monacaでタブでpage2に移動した際にボタンを押すとmodalを表示したいのですが  
<http://ja.onsen.io/reference/ons-modal.html>  
こちらを参考に入れてみたのですが全く動きません・・

ご教授いただけますでしょうか。

index.html

[code]

    <!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>
    
[/code]

page2.html

[code]

    <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>
    
[/code]


CC BY-SA 3.0
2015-10-21T03:49:57.033
17884
2015-10-22T01:15:38.933
2015-10-21T03:58:39.237
12624
12624
question
monaca
monaca タブ移動したページでmodalが使用できない


`ons-loading-placeholder`属性の要素と関連部分(`ons-template`)を削除すると動作します。  
※一部JavaScriptも修正してあります。  
※jQueryコンポーネントは有効。

> Onsen UIが必要なフレームワーク一式の読み込みを完了するまで、読み込み中画面を表示することができます。これはOnsen
> UIをWebアプリケーションで使用する場合に便利です。ons-loading-placeholder属性を持つ要素は、Onsen
> UIの読み込みが完了した時点で、ons-loading-placeholder要素が参照するテンプレートに置き換わります。

まずは、一つ一つの機能を把握して使用すべきだと思います。

index.html

[code]

    <!DOCTYPE HTML>
    <html>
    <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()
        ons.ready(function() {
            $(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>
    
[/code]

page2.html

[code]

    <ons-page id="my-page">
        <ons-toolbar fixed-style>
            <div class="center">ITEM</div>
        </ons-toolbar>
        <ons-button id="show-modal" modifier="light">Open Modal</ons-button>
        <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>
    
[/code]


CC BY-SA 3.0
2015-10-21T06:18:35.160
17892
2015-10-22T01:15:38.933
2015-10-22T01:15:38.933
9566
9566
17884
answer