Desafio CEJS 2014 https://gist.github.com/mozartdiniz/0f53ad6156e12bca2dec

dialog.css

.modalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}

.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}

.open {
  opacity:1;
	pointer-events: auto;
}

.modalDialog > div {
	width: 400px;
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: #fff;
	background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
}


.modalDialog > div > h2 {
    color: #920;
    font-family: initial!important;
    font-size: 30px;
    font-weight: bold;
    left: initial!important;
    position: initial!important;
    top: initial!important;
}

.modalDialog > div > .close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
	opacity: 0.5;
}

.modalDialog > div > .close:hover { background: #00d9ff; }

dialog.js

var DialogWindow = function(config) {
  
  this.dom = document.createElement("div");
  this.dom.setAttribute("class", "modalDialog");
  this.dom.setAttribute("id", "openModal");
  
  var close = document.createElement("a");
  close.setAttribute("class", "close");
  close.setAttribute("title", "Close");
  close.setAttribute("href", "#close");
  close.innerHTML = "X";
    
  var title = document.createElement("h2");
  title.innerHTML = config.title;
  
  var content = document.createElement("div");
  
  if(config.content) {
    if(typeof config.content === "string") {
      content.innerHTML = config.content;
    } else {
      content.innerHTML = "";
      content.appendChild(config.content);
    }   
  }
  
  var bodyWindow = document.createElement("div");
  bodyWindow.appendChild(close);
  bodyWindow.appendChild(title);
  bodyWindow.appendChild(content);
  this.dom.appendChild(bodyWindow);
  
  document.body.appendChild( this.dom );
  
  this.close = function() {
    document.body.removeChild( this.dom );
  };
  
  this.show = function() {
    this.dom.setAttribute("class", "modalDialog open");
  }
  
  var scope = this;
  close.addEventListener("click", function(evt) {
    evt.preventDefault();
    scope.close();
  });
    
}

Engine.js

var JiujitsuTeam = {};

JiujitsuTeam.Field = {
  
  text: function(field) {

    var input = document.createElement("input");
    input.setAttribute("id", field.id || field.name);
    input.setAttribute("name", field.name);
    input.setAttribute("class", "form-control");
    input.setAttribute("placeholder", "Enter text");
    input.setAttribute("mandatory", field.mandatory );
    
    var mandatory = function(event) { 
      /* dever de casa */
      console.log(event.target.value, event.target.checked);
    };
    
    input.addEventListener("keyup", mandatory.bind(input) );
    input.addEventListener("change", mandatory.bind(input) );

    return input;
    
  },
  
  button: function(field) {
    var input = JiujitsuTeam.Field.text.call(this, field);
        input.setAttribute("type", "button");
        input.setAttribute("value", field.name);
        
        /* 
          dever de casa generalizar buttons, aqui convencionei 
          que só teremos submit
        */
        input.addEventListener("click", function(evt){
          evt.preventDefault();          
          evt.target.formParent.save();
        }.bind(input) );
    
    return input;
  },
  
  date: function(field) {
    var input = JiujitsuTeam.Field.text.call(this, field);
        input.setAttribute("type", "date");
        input.setAttribute("placeholder", "Enter Date");
    
    return input;
  }
  
}

JiujitsuTeam.FormEngine = function(model) {
  
  this.form = document.createElement("form");
  
  var _model = model;
  this.getModel = function() {
    return _model || {};
  };
  this.setModel = function(model) {
    _model = model;
  };

  this.save = function() {
    
    if( this.getModel().id ) {
      console.log("Atualiza");
    } else {
      console.log("Cria");
    }

  };
  
  this.createLabel = function(field) {
    
    var label = document.createElement("label");
        label.setAttribute("for", field.name);
        label.innerHTML = field.name; //Dever de casa, fazer I18n aqui
        
    return label;
    
  };
  
  this.createInput = function(field) {
    var constructor = JiujitsuTeam.Field[field.type] || JiujitsuTeam.Field['text'];
    var input = new constructor(field);
    input.formParent = this;
    return input;
  };
  
  this.createField = function(field) {
    
    var formGroup = document.createElement("div");
    formGroup.setAttribute("class", "form-group");
    
    if( field.type !== 'button') {
      formGroup.appendChild( this.createLabel(field) );
    }
    formGroup.appendChild( this.createInput(field) );
    
    return formGroup;
    
  };
  
  this.createFields = function(sectionArea, section) {
    if( Array.isArray(section.fields) ) {
      
      section.fields.forEach( function(field){
        sectionArea.appendChild( this.createField( field) );
      }, this );
      
    }
  };
  
  this.createSection = function(section) {
    var sectionArea = document.createElement('div');
    sectionArea.className = 'section';
    
    var description = document.createElement("h3");
    description.innerHTML = section.description;
    
    sectionArea.appendChild( description );
     
    this.createFields(sectionArea, section);
    this.form.appendChild( sectionArea );
  };
  
  this.render = function(layout) {
    
    if( layout && layout.sections) {
      layout.sections.forEach(this.createSection, this);
    }
    
    this.form.addEventListener("submit", function(evt){
      evt.preventDefault();
      this.save();
    }.bind(this));
    
    return this;
  
  };
  
  this.getForm = function() {
    return this.form;
  };
  
  return this;
  
};

Impl.js

var model = {id: 10000};
var contatoForm = new JiujitsuTeam.FormEngine(model);

new DialogWindow({
  title: "Contato",
  content: contatoForm.render(window.layout).getForm()
}).show();

rest.js

window.layout = {
   sections:[{
     description: 'Dados de autenticação',
     fields: [{
       name: 'login',
       mandatory: true,
       type: 'text'
     },{
       name: 'password',
       mandatory: true,
       type: 'password'
     },{
       name: 'expirationDate',
       mandatory: true,
       type: 'date'
     },{
       name: 'enabled',
       mandatory: false,
       type: 'checkbox'
     }]
   },{
     description: 'Dados de contato',
     fields: [{
       name: 'rua',
       mandatory: false,
       type: 'text'
     },{
       name: 'complemento',
       mandatory: false,
       type: 'text'
     },{
       name: 'bairro',
       mandatory: false,
       type: 'text'
     },{
       name: 'telefone',
       mandatory: false,
       type: 'tel'
     }]
   },{
     description: '',
     fields: [{
        name: 'submit',
        type: 'button'
     }]
   }]
};