Error: node is undefined
-
Dir Fran Diox !!!
Now, I have problems about ‘ons-modal’ on firefox and safari de-bug.
When i add 1 ons-xxx html tag in ons-modal, this error notification.And this is my code :
“angular”: “1.4.8”,
“jquery”: “2.2.2”,
“onsenui”: “2.0.0-rc.4”<!doctype html> <html> <meta charset="utf-8"> <title>modal.com</title> <link rel="stylesheet" href="../bower_components/onsenui/css/onsenui.css"> <link rel="stylesheet" href="../bower_components/onsenui/css/onsen-css-components.css"> <link rel="stylesheet" href="../css/common.css"> <script src="../bower_components/angular/angular.js"></script> <script src="../bower_components/onsenui/js/onsenui.js"></script> <script src="../bower_components/onsenui/js/angular-onsenui.js"></script> <script src="../bower_components/jquery/dist/jquery.js"></script> <script> ons.bootstrap(); $(function() { $('#show-modal').click(function() { //$('#modal').show(); modal.show(); }); $('#close-modal').click(function() { $('#modal').hide(); }); }); </script> <body> <ons-page id="my-page"> <ons-toolbar> <div class="center">Modal</div> </ons-toolbar> <p style="text-align: center;" class="pt45"> <ons-button id="show-modal" modifier="light">Open Modal</ons-button> </p> </ons-page> <ons-modal id="modal" var="modal"> <p>Modal content</p> <ons-button id="close-modal" modifier="light">Close Modal</ons-button> </ons-modal> </body> </html>
-
@Thanh-Hai-Lai-Ho Hello! Try to move the
ons-modal
insideons-page
. I think that removes the errors.
-
@Fran-Diox :laughing: It’s good !
Thank U so much !!!
-
@Fran-Diox but how else, I still left it outside…
example
<ons-template id="modal.html"> <ons-modal id="modal" var="modal"> <p>Modal content</p> <ons-button id="close-modal" modifier="light">Close Modal</ons-button> </ons-modal> </ons-template>
So, I will call modal , how ? :smiley:
-
@Thanh-Hai-Lai-Ho Sorry, I think
ons-modal
is not supposed to be used insideons-template
.
-
@Fran-Diox
Because in my project I doing, it is big modal<ons-modal id="modal" var="modal"> <ons-toolbar> <div class="center">Modal</div> </ons-toolbar> <p>Modal content</p> <ons-button id="close-modal" modifier="light">Close Modal</ons-button> <ons-bottom-toolbar class="bottom-bar footer-bar"> <div class="center">title</div> </ons-bottom-toolbar> <!-- end bottom-bar --> </ons-modal>