New Twiddle

components.z-dialog.js

import Ember from 'ember';

export default Ember.Component.extend({
   			tagName : 'div',
        classNames : ['zc-dialog'],
        attributeBindings : ['title','modal','closable','buttons', "name"],
        closable : true,
        didInsertElement : function(){
           if(this.get("modal")){
             this._createOverlay();
           }
        },
  		  _createOverlay : function(){
          //alert(this.get("name"));
  			this._overlay = $("<div class='zc-dialog-overlay'></div>");
           $("body").append(this._overlay);
           var base = this,
               documentHeight=$(document).height(),
               windowHeight = $(window).height(),
	       documentWidth = $(document).width(),
               windowWidth = $(window).width();
		if(documentHeight > windowHeight){
			this._overlay.height(documentHeight);
		}
		if(documentWidth > windowWidth){
			this._overlay.width(documentWidth);
		}
                this._overlay.attr("tabindex",1).on("keydown",function(event){

                       if(event.keyCode === "27"){ // escape key
                            this.send("close",event);
                       }
                });
        },
        actions : {
            close : function(){
               if(this._overlay){
                  this._overlay.remove();
                  this._overlay = undefined;
               }
               $(this.element).hide();
            }
        },
        willDestroyElement : function(){
            if(this._overlay){
               this._overlay.remove();
               this._overlay = undefined;
            }
        }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

controllers.index.js

import Ember from 'ember';

export default Ember.Controller.extend({
    actions : {
         showDialog : function(dialogName){
           $("div[name="+dialogName+"]").show();
         }
     }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}
.z-button {
	display:inline-block;
	position:relative;
	text-decoration:none;
	text-align:center;
	overflow:visible;
	cursor:pointer;
	padding:5px 13px;
	margin-right:5px;
	border:1px solid transparent;
	background-color:#eaeaea;
	color:#181818;
	border-color:#eaeaea;
	border-bottom-color:#d9d9d9;
	-ms-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	height:30px;
	line-height:1.4;
        background-color:#666;
	color:#fff;
	border-color:#666;
	border-bottom-color:#323232;
	width: 115px;
  z-index: 1001;
}
.z-button:focus{
	outline : none;
}
body{
    font-family: Lucida Grande, Segoe UI, Arial, Helvetica, sans-serif;
    font-size: 13px;
}
/*  Dialog Component */

/*.zc-dialog *{ box-sizing:border-box;}   Removed in order to avoid spinner structure breakage */
.zc-dialog, .zc-alert-dialog{
	border:1px solid #d7d7d7;
    box-shadow:0px 4px 15px rgba(0, 0, 0, 0.1);
	background-color:#fff;
	width:300px;
	overflow:hidden;
	box-sizing:content-box;
	padding:0 30px;
	position:absolute;
	display: none;
  z-index: 1001;
}
.zc-draggable .zc-dialog-titlebar{ 
	cursor:move;
}

/*----------- Header part -----------*/

.zc-dialog-titlebar {
	padding:28px 0 0 0;
	font-size:16px;
	color:#111;
	text-align:left;
	box-sizing:content-box;
}
.zc-dialog-img .zc-dialog-title, 
.zc-dialog-img .zc-dialog-msg{
	display: block;
	margin-left:39px;
  	line-height: 18px;
	margin-top:1px;
	text-align:left;
}
.zc-dialog-titlebar-close, 
.zc-dialog-titlebar-minimize{ 
	float:right;
	height:16px;
	margin-right:-2px;
}
.zc-dialog-titlebar-minimize, 
.zc-dialog-titlebar-maximize{ 
	margin-right:8px;
}
.zc-dialog-titlebar-close:hover, 
.zc-dialog-titlebar-minimize:hover{ 
	background-color:#f0f0f0;
}
.zc-dialog-titlebar-close:focus, 
.zc-dialog-titlebar-minimize:focus{ 
	background-color:#dadada; 
	outline:none;
}

/*----------- Content part -----------*/

.zc-dialog-content {
	padding:28px 0 30px 0;	
	color:#111;
	display:inline-block; 
	width:100%; 
	box-sizing:content-box;
	float:left;
	overflow: auto;
	position:relative;
}

.zc-helper-clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/*-----------  Bottom part -----------*/
.zc-dialog-buttonpane{
	padding-bottom:30px;
    box-sizing:content-box;
    display:inline-block;
    width:100%;
	text-align:right;
	padding-top:30px;
}
.zc-dialog-buttonpane .zc-btn:last-child{ 
	margin-right:0;
}
.zc-dialog-buttonset{
	width: 100%;
	text-align: right;
	position: relative;
}
.zc-dialog .zc-btn{ 
	min-width:74px; 
	text-align:center;
}

.zc-dialog-titlebar + .zc-dialog-content + .zc-dialog-buttonpane, 
.zc-dialog-content + .zc-dialog-buttonpane{ 
	padding-top:15px; /* Modified - 0 is replaced by 15px */
}
.zc-dialog-overlay{
	background-color: #aaaaaa;
	opacity: 0.30;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
  z-index : 1000;
}
a{
  text-decoration:none;
  color: black;
}

templates.application.hbs

<h1>Dialog Component</h1>
<br>
<br>
{{outlet}}
<br>
<br>

templates.components.z-dialog.hbs

<div class="zc-dialog-titlebar zc-helper-clearfix">
		<span class="zc-dialog-title">{{title}}</span>
	        {{#if closable}}
	        <a href="javascript:;" class="zc-dialog-titlebar-close" {{action "close"}}>
		<span>X</span>
	        </a>
	{{/if}}
	</div>
	<div class="zc-dialog-content">
		{{yield}}
	</div>
	<div class="zc-dialog-buttonpane zc-helper-clearfix">
		<div class="zc-dialog-footer-status" style="display: none;"></div>
		{{#each actionButtons as |btnObj|}}
    			<button {{action "close"}} class="zc-btn {{if btnObj.style "zc-zbtn-primary"}}" id={{btnObj.id}}>
				<span class="zc-btn-text">{{btnObj.value}}</span>
			</button>
  		{{/each}}
	</div>

templates.index.hbs

 <button class="z-button" {{action "showDialog" "dialog1" }}> Modaless Dialog </button>
   <button data-dialog="dialog2" class="z-button" {{action "showDialog" "dialog2" }}> Modal Dialog </button>
   
      {{#z-dialog name="dialog1" title="Dialog Title"}} Content of the Dialog {{/z-dialog}}
   
      {{#z-dialog name="dialog2" title="Modal Dialog" modal="true"}} Content of the Modal Dialog {{/z-dialog}}
   
   
   <button data-dialog="dialog3" class='z-button' {{action "showDialog" "dialog3"}}>Save Button</button>
    {{#z-dialog name="dialog3" title="Save Dialog"}} 
     <p> Enter your file name </p>
     <input type="text"/>
    {{/z-dialog}}

twiddle.json

{
  "version": "0.10.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.6.0",
    "ember-data": "2.6.1",
    "ember-template-compiler": "2.6.0"
  },
  "addons": {}
}