Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="description" content="Recipe: Using a Modal Dialog" />
  <title>Recipe: Using a Modal Dialog</title>
  <link rel="stylesheet" href="https://rawgithub.com/emberjs/starter-kit/v1.0.0/css/normalize.css">
</head>
<body>
  
  <script type="text/x-handlebars">
    {{outlet}}
    {{outlet modal}}
  </script>
  
  <script type="text/x-handlebars" data-template-name="index">
    <h4>The current name is: {{name}}</h5>
    {{outlet}}
    <button {{action 'openModal' 'modal' model}}>Change Name</button>
  </script>
​
  <script type="text/x-handlebars" data-template-name="modal">
    {{#modal-dialog action="close"}}
      <h3 class="flush--top">Name Change Modal</h5>
      <p>Enter a new name:</p>
      <p>{{input value=name}}</p>
      <button {{action "close"}}>Done</button>
    {{/modal-dialog}}
  </script>
  
  <script type="text/x-handlebars" id="components/modal-dialog">
    <div class="overlay" {{action "closeModal"}}> 
    </div>
    <div class="modal">
      {{yield}}
    </div>
  </script>
  
  <script src="https://rawgithub.com/emberjs/starter-kit/v1.0.0/js/libs/jquery-1.9.1.js"></script>
  <script src="https://rawgithub.com/emberjs/starter-kit/v1.0.0/js/libs/handlebars-1.0.0.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.4.0/ember.js"></script>
​
</body>
</html>
​
 
/* Put your CSS here */
html, body {
  margin: 20px;
}
​
* {
  box-sizing: border-box;
}
​
.modal {
  position: relative;
  margin: 10px auto;
  width: 300px;
  background-color: #fff;
  padding: 1em;
}
​
input {
  width: 100%;
}
​
.overlay {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
}
​
.flush--top {
  margin-top: 0;  
}
 
var App = Ember.Application.create();
​
App.ApplicationRoute = Ember.Route.extend({
  actions: {
    openModal: function(modalName, model) {
      this.controllerFor(modalName).set('model', model);
      return this.render(modalName, {
        into: 'application',
        outlet: 'modal'
      });
    },
    
    closeModal: function() {
      return this.disconnectOutlet({
        outlet: 'modal',
        parentView: 'application'
      });
    }
  }
});
​
App.IndexRoute = Ember.Route.extend({
  model: function() {
    return Em.Object.create({name: 'Mitch'});
  }
});
​
App.ModalController = Ember.ObjectController.extend({
  actions: {
    close: function() {
      return this.send('closeModal');
    }
  }
});
​
App.ModalDialogComponent = Ember.Component.extend({
  actions: {
    close: function() {
      return this.sendAction();
    }
  }
});
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
rwjbluepro
0viewers