ポップアップ表示が出来ません

【質問内容】
monacaでonsenUI v1 ⇒onsenUI v2に移行させたいのですがうまくいきません。
リファレンスを見たりサイトを色々調べてみて色々試してみたのですが、「ポップアップ」を表示することが出来ませんでした。
本当に困っています。どなたかお教え頂けないでしょうか。。
よろしくお願い致します。

【概要】
・onsenUI v1では動作していたのですが、JS/CSSコンポーネントの追加と削除から
onsenUIを削除してから再度更新(onsenUIv2にバージョンアップ)した後動きません。
(参考URL https://ja.onsen.io/blog/moving-onsenui-v1-to-v2/)

・onsenUI v1で動作したソースから少し変更を加えています。
・ポップアップを表示させるギアアイコンをタッチすると押した反応(画像が薄くなる)はあるのですがポップアップが表示されません。

index.html

html
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">-->
6    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=2, user-scalable=yes">
7    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
8    <script src="components/loader.js"></script>
9    <script type="text/javascript" src="popover.js"></script>
10    <link rel="stylesheet" href="components/loader.css">
11    <link rel="stylesheet" href="css/style.css">
12
13    <script>
14        //ons.bootstrap();  //エラーが出るので削除しました。
15    </script>
16    
17</head>
18<body>
19
20   <ons-navigator id="myNavigator" page="main.html">       <!--varからidに修正しました-->
21   </ons-navigator>

main.html

html
1<ons-page>
2    <ons-toolbar>
3        <div id="example" class="center">Home</div>
4            <div class="right">
5                <ons-toolbar-button><ons-icon icon="ion-gear-b" onclick="popover.show($event)"></ons-icon>
6                </ons-toolbar-button>
7            </div>
8    </ons-toolbar>
9</ons-page>

popover.html

html
1<ons-popover id="popover" cancelable style="width: 95%; max-width: 300px;" direction="down" animation="default">
2<link rel="stylesheet" href="css/popover.css">
3    <ons-row>
4        <ons-col class="menu-item-col" onclick="navi.hide()" id="test_view">
5            <ons-icon icon="ion-document" class="menu-item-icon"></ons-icon>
6            <div class="menu-item-label" color: #999;>test表示！！！</div>
7        </ons-col>
8    </ons-row>
9    
10      
11
12</ons-popover>

namimon

2017/05/26 00:21

ポップアップというのは、何かのプラグインを使っているのでしょうか。もしそうであれば、URL、バージョンなどを教えてください。

行動規範の内容に同意します

回答1件

popover.htmlが読み込めてない感じですね。

monacaの環境ではありませんが、OnsenUI2使ってやる手法としては

index.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.2.6/css/onsenui.css" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.2.6/css/onsen-css-components.css" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.2.6/js/onsenui.js"></script>
	<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>

<body>
<ons-navigator id="myNavigator" page="main.html">       <!--varからidに修正しました-->
</ons-navigator>
</body>
<script>
ons.ready(function() {
	ons.createPopover('popover.html');
});
</script>
</html>

main.html

<ons-toolbar>
	<div id="example" class="center">Home</div>
		<div class="right">
			<ons-toolbar-button onclick="popover.show(this);"><ons-icon icon="ion-gear-b"></ons-icon>
		</ons-toolbar-button>
	</div>
</ons-toolbar>

popover.html

<ons-popover id="popover" cancelable style="width: 95%; max-width: 300px;" direction="down" animation="default">
	<ons-row>
		<ons-col class="menu-item-col" onclick="navi.hide()" id="test_view">
			<ons-icon icon="ion-document" class="menu-item-icon"></ons-icon>
			<div class="menu-item-label">test表示！！！</div>
		</ons-col>
	</ons-row>
</ons-popover>

で表示されるの確認しましたのでお試しください。

投稿2017/05/26 06:14