navio · August 29, 2015 14:16
diff --git a/modal.html b/modal.html
 <html>
  <head>
    <title>Information</title>
  </head>
  <body>
    <p>Open Modal</p>
  </body>
  <style media="screen">
    .ui-modal{
      display:block;
      color: red;
    }
    .hide {
      display: none;
    }
  </style>
  <script charset="utf-8">

  function ModalClass(content){

    this.instance = init();
    this.data = content;

    function init(){

      var modalDiv = document.createElement('div');
          modalDiv.setAttribute('class','ui-modal hide');
          modalDiv.innerHTML = content;
      return document.querySelector('body').appendChild(modalDiv);

    }

  }

  ModalClass.prototype._refreshContent = function(){ this.instance.innerHTML = this.data; };
  ModalClass.prototype.updateContent =  function(content){
                                          this.data = content;
                                          this._refreshContent();
                                           };
  ModalClass.prototype.me   =  function()  { return this.instance };
  ModalClass.prototype.hide =  function()  {  this.instance.setAttribute('class','hide'); return 0; }
  ModalClass.prototype.show =  function()  {  this.instance.setAttribute('class','ui-modal'); return 1; };

  function ModalFactory(){

    var instance;

    return function interface(){

            if(this.instance !== undefined ){
              this.instance.updateContent(arguments[0]);
              return this.instance;
            }

            this.instance = Object.create(ModalClass.prototype);
                            ModalClass.apply(this.instance,arguments);

            return this.instance;

           };
  }

  var Modal    = new ModalFactory();
  var modal    = Modal('This is my Content');
  var modal1   = Modal('This is my Content1');

  document.querySelector('p').addEventListener('click',function(){ modal.show(); });

  </script>

 </html>
	<html>
	<head>
	<title>Information</title>
	</head>
	<body>
	<p>Open Modal</p>
	</body>
	<style media="screen">
	.ui-modal{
	display:block;
	color: red;
	}
	.hide {
	display: none;
	}
	</style>
	<script charset="utf-8">

	function ModalClass(content){

	this.instance = init();
	this.data = content;

	function init(){

	var modalDiv = document.createElement('div');
	modalDiv.setAttribute('class','ui-modal hide');
	modalDiv.innerHTML = content;
	return document.querySelector('body').appendChild(modalDiv);

	}

	}

	ModalClass.prototype._refreshContent = function(){ this.instance.innerHTML = this.data; };
	ModalClass.prototype.updateContent = function(content){
	this.data = content;
	this._refreshContent();
	};
	ModalClass.prototype.me = function() { return this.instance };
	ModalClass.prototype.hide = function() { this.instance.setAttribute('class','hide'); return 0; }
	ModalClass.prototype.show = function() { this.instance.setAttribute('class','ui-modal'); return 1; };

	function ModalFactory(){

	var instance;

	return function interface(){

	if(this.instance !== undefined ){
	this.instance.updateContent(arguments[0]);
	return this.instance;
	}

	this.instance = Object.create(ModalClass.prototype);
	ModalClass.apply(this.instance,arguments);

	return this.instance;

	};
	}

	var Modal = new ModalFactory();
	var modal = Modal('This is my Content');
	var modal1 = Modal('This is my Content1');

	document.querySelector('p').addEventListener('click',function(){ modal.show(); });

	</script>

	</html>