Error: node is undefined

Thanh Hai Lai Ho

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>

Fran Diox

@Thanh-Hai-Lai-Ho Hello! Try to move the ons-modal inside ons-page. I think that removes the errors.

Thanh Hai Lai Ho

@Fran-Diox It’s good !
Thank U so much

Thanh Hai Lai Ho

@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 ?

Fran Diox

@Thanh-Hai-Lai-Ho Sorry, I think ons-modal is not supposed to be used inside ons-template.

Thanh Hai Lai Ho

@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>

Error: node is undefined browsing