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>Este ShareCode tiene versiones:
- var res = document.getElementById('... (22/04/2011)
- var res = document.getElementById('... (24/04/2013)
- var res = document.getElementById('... (24/04/2013)
- var res = document.getElementById('... (24/04/2013)
- var res = document.getElementById('... (24/04/2013)
- var res = document.getElementById('... (24/04/2013)
Enlace
El enlace para compartir es: