Adding div element to body or document in JavaScript -


i creating light box in pure javascript. making overlay. want add overlay body want keep content on page. current code adds overlay div removes current contents in body. how add div element , keep contents on body?

var el = document.getelementbyid('element'); var body = document.getelementsbytagname('body'); el.innerhtml = '<p><a id="clickme" href="#">click me</a></p>'; document.getelementbyid('clickme').onclick = function (e) {     e.preventdefault();     document.body.innerhtml = '<div style="position:absolute;width:100%;height:100%;opacity:0.3;z-index:100;background:#000;"></div>'; } 

try out:-

http://jsfiddle.net/adiioo7/vmfba/

use

document.body.innerhtml += '<div style="position:absolute;width:100%;height:100%;opacity:0.3;z-index:100;background:#000;"></div>'; 

instead of

document.body.innerhtml = '<div style="position:absolute;width:100%;height:100%;opacity:0.3;z-index:100;background:#000;"></div>'; 

Comments

Popular posts from this blog

Delphi XE2 Indy10 udp client-server interchange using SendBuffer-ReceiveBuffer -

Qt ActiveX WMI QAxBase::dynamicCallHelper: ItemIndex(int): No such property in -

Enable autocomplete or intellisense in Atom editor for PHP -