表示位置とか大きさとかいろいろおかしいですが、一応表示はできました。 [ガイド][1]の実例で「Edit」を押すとCodePenに飛べるので、そっちを参考にした方がやりやすいかもしれません。 あと、Onsen UIがAngularJSベースらしいので、Angularっぽい記述の方が動きやすい気がします。 <!-- begin snippet: js hide: false --> <!-- language: lang-js --> ons.bootstrap() .factory("SharedService", ["$rootScope", function($rootScope) { var popover = null; return { popover: { get: function() { return popover; }, create: function() { ons.createPopover('popover.html').then(function(pop) { popover = pop; $rootScope.$broadcast('done'); }); } } }; }]) .controller('AppController', function($scope, SharedService) { SharedService.popover.create(); $scope.$on('done', function() { $scope.popover = SharedService.popover.get(); }); $scope.show = function(e) { $scope.popover.show(e); }; }) .controller('popUpController', function($scope, SharedService) { $scope.$on('done', function() { $scope.popover = SharedService.popover.get(); }); $scope.hide = function() { $scope.popover.hide(); }; }); <!-- language: lang-html --> <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsenui.css" rel="stylesheet"/> <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsen-css-components.css" rel="stylesheet"/> <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/angular/angular.min.js"></script> <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/onsenui.min.js"></script> <ons-sliding-menu main-page="home.html" menu-page="menu.html" side="left" max-slide-distance="250px" var="menu"> </ons-sliding-menu> <ons-template id="home.html"> <ons-navigator title="PENDONA" animation="slide" var="navi" ng-controller='AppController'> <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button> </div> <div class="center">Home</div> <div class="right" id="tsuti"> <ons-toolbar-button ng-click="show('#tsuti')"><ons-icon icon="ion-ios-bell"></ons-icon></ons-toolbar-button> </div> </ons-toolbar> <div style="text-align: center"> <p style="color: #999; padding-top: 100px;">Home Content</p> <ons-button ng-click="navi.pushPage('page2.html')">Push Page</ons-button> </div> </ons-page> </ons-navigator> </ons-template> <ons-template id="page2.html"> <ons-page> <ons-toolbar> <div class="left"> <ons-back-button>Back</ons-back-button> </div> <div class="center">Page 2</div> <div class="right" id="pop"> <ons-toolbar-button ng-click="show('#pop')"><ons-icon icon="ion-ios-bell"></ons-icon></ons-toolbar-button> </div> </ons-toolbar> <div style="text-align: center"> <h1>Page 2</h1> <ons-button ng-click="menu.toggleMenu()">Toggle Menu</ons-button> </div> </ons-page> </ons-template> <ons-template id="menu.html"> <ons-list> <ons-list-item modifier="chevron" onclick="menu.setMainPage('home.html', {closeMenu: true})"> home.html </ons-list-item> </ons-list> </ons-template> <ons-template id="popover.html"> <ons-popover cancelable style="width: 95%; max-width: 300px;" direction="down" animation="fade" ng-controller="popUpController"> <ons-row> <ons-col class="menu-item-col" ng-click="hide()"> <ons-icon icon="ion-upload" class="menu-item-icon"></ons-icon> <div class="menu-item-label">新規作成</div> </ons-col> <ons-col class="menu-item-col" ng-click="hide()"> <ons-icon icon="ion-folder" class="menu-item-icon"></ons-icon> <div class="menu-item-label">フォルダを作成</div> </ons-col> <ons-col class="menu-item-col" ng-click="hide()"> <ons-icon icon="ion-edit" class="menu-item-icon"></ons-icon> <div class="menu-item-label">編集</div> </ons-col> </ons-row> </ons-popover> </ons-template> <!-- end snippet --> [1]: http://ja.onsen.io/reference/ons-popover.html#events-summary