Gracias, Wikipedia.
ShareCode
Permalink: http://www.treeweb.es/u/974/ 01/02/2011

ShareCode

1 <div id="resultado">2 </div>3 4 5 <script type="text/javascript">6 var res = document.getElementById('resultado');7 8 9 var Dialog = function() {10  this.center = function() {11  dom_box.style.left = (dom.clientWidth/2 - dom_box.clientWidth/2)+'px';12  dom_box.style.top = (dom.clientHeight/3 - dom_box.clientHeight/3)+'px';13  }14  15  this.setTitle = function(title) {16  dom_title.innerHTML = title;17  }18  19  this.getTitle = function() {20  return dom_title.innerHTML;21  }22  23  this.hide = function() {24  dom.style.visibility = 'hidden';25  }26  27  this.show = function() {28  dom.style.visibility = 'visible';29  this.center();30  }31  32  this.add = function(element) {33  dom_body.appendChild(element);34  this.center();35  }36  37  this.clear = function() {38  dom_body.innerHTML = '';39  this.center();40  }41  42  this.setText = function (text) {43  dom_text.innerHTML = text;44  if (text == '')45  dom_text.style.display = 'none';46  else47  dom_text.style.display = 'block';48  this.center();49  }50 51  this.getText = function () {52  return dom_text.innerHTML;53  }54  55  this.getVersion = function() {56  return '0.0.1';57  }58 59  // Constructor60  var superthis = this;61  var dom = document.createElement('div');62  dom.style.position = 'fixed';63  dom.style.height = '100%';64  dom.style.width = '100%';65  dom.style.left = '0';66  dom.style.top = '0';67  dom.style.backgroundColor = 'rgba(255,255,255,0.8)';68  var dom_box = document.createElement('div');69  dom_box.style.border = 'solid black 1px';70  dom_box.style.minWidth = '300px';71  dom.style.visibility = 'hidden';72  dom_box.style.position = 'absolute';73  dom_box.style.borderRadius = '8px';74  dom_box.style.backgroundColor = 'rgba(255,255,255,0.4)';75  dom_box.style.border = 'solid black 1px';76  dom_box.style.margin = '0 auto 0 auto';77  dom_box.style.overflow = 'auto';78  dom_box.style.boxShadow = '5px 5px 10px #000000';79  var dom_exit = document.createElement('div');80  dom_exit.innerHTML = 'X';81  dom_exit.style.fontSize = '14px';82  dom_exit.style.fontWeight = 'bold';83  dom_exit.style.padding = '4px';84  dom_exit.style.color = 'red';85  dom_exit.style.cssFloat = 'right';86  dom_exit.style.cursor = 'pointer';87  dom_exit.onclick = function() {dom.style.visibility = 'hidden';};88  dom_box.appendChild(dom_exit);89  var dom_title = document.createElement('div');90  dom_title.innerHTML = 'Título';91  dom_title.style.fontSize = '14px';92  dom_title.style.backgroundColor = 'rgba(255,255,255,0.8)';93  dom_title.style.fontWeight = 'bold';94  dom_title.style.borderRadius = '8px 8px 0 0';95  dom_title.style.padding = '4px';96  dom_title.style.textAlign = 'center';97  dom_box.appendChild(dom_title);98  var dom_text = document.createElement('div');99  dom_text.style.fontSize = '12px';100  dom_text.style.padding = '8px';101  dom_text.style.display = 'none';102  dom_box.appendChild(dom_text);103  var dom_body = document.createElement('div');104  dom_body.style.fontSize = '12px';105  dom_body.style.padding = '0px';106  dom_body.style.overflow = 'auto';107  dom_box.appendChild(dom_body); 108  var dom_footer = document.createElement('div');109  dom_footer.style.padding = '8px';110  dom_footer.style.fontSize = '12px';111  dom_box.appendChild(dom_footer); 112  dom.appendChild(dom_box);113  114  document.body.appendChild(dom);115  document.body.onresize = function() {superthis.center();}116  117  this.center(); 118  }119 120 121 122 123 124 var SlideBar = function() {125  this.center = function() {126  if (orientation == 'left') {127  dom.style.left = 0;128  dom.style.top = (document.documentElement.clientHeight/2 - dom.clientHeight/2)+'px';129  dom.style.borderRadius = '0 8px 8px 0';130  dom.style.borderLeft = 'none';131  dom.style.borderTop = '';132  }133  if (orientation == 'top'){134  dom.style.top = 0;135  dom.style.left = (document.documentElement.clientWidth/2 - dom.clientWidth/2)+'px';136  dom.style.borderRadius = '0 0 8px 8px';137  dom.style.borderTop = 'none';138  dom.style.borderLeft = '';139  }140  }141  142  this.setOrientation = function (ori) {143  if (ori == 'left') {144  orientation = ori;145  this.center();146  } else if (ori == 'top') {147  orientation = ori;148  this.center();149  }150  }151  152  this.add = function(element) {153  dom_body.appendChild(element);154  this.center();155  }156  157  this.getVersion = function() {158  return '0.0.1';159  }160 161  // Constructor162  var orientation = 'left';163  var superthis = this;164  var dom = document.createElement('div');165  dom.style.position = 'fixed';166  dom.style.border = 'solid black 1px';167  dom.style.left = '0';168  dom.style.top = '0';169  dom.style.padding = '8px';170  dom.style.borderRadius = '8px';171  dom.style.backgroundColor = 'rgba(255,255,255,0.9)';172  dom.style.boxShadow = '5px 5px 10px #000000';173 174 175  document.body.appendChild(dom);176  document.body.onresize = function() {superthis.center();}177  178  this.center(); 179  }180 181 182 183 184 185 var midialog = new Dialog();186 187 midialog.setTitle('Mi Título');188 //midialog.setText('Mi texto de prueba :) ');189 //midialog.show();190 191 var d1 = document.createElement('div');192 d1.style.border = 'solid red 10px';193 d1.style.width = '500px';194 d1.style.height = '100px';195 midialog.add(d1);196 197 198 var mybar = new SlideBar();199 mybar.setOrientation('top');200 mybar.setOrientation('left');201 mybar.setOrientation('top');202 mybar.setOrientation('left');203 mybar.setOrientation('top');204 mybar.setOrientation('left');205 206 </script>
Enlace
El enlace para compartir es: