javascript - Multiple popup window layers position in CSS -
hi have jquery popup window has 3 layers image below. i'm trying make window3 centered overlaps window2. reason, window3 stays @ top-left corner image. tried many different ways(padding, margin, z-index, position..) no matter do, window3 won't centered. maybe missed , hope other ideas. didn't post html since contains 3 windows div tags bunch data-fields generated javascript below.
function( contenturl, container, theight, twidth, controller, param ){ if( container === "dialog" ){ var mask = '<div class="mask"></div>'; var window3 = '<div class="window3"></div>'; $(mask).appendto('body'); $(window3).appendto('body');
style.css
.mask { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #000000; opacity: 0.7; z-index: 10; } .window1 { background: #006666; width:430px; height:330px; opacity: 0.5; padding:10px; } .window2 { background: #fff; width:400px; height:300px; border-radius:14px; margin:10px; } .window3{ position: fixed; background: #ffffff; margin: auto; top: 0; left: 0; right: 0; bottom: 0; border-radius:14px; z-index: 10; }
try:
position: relative; on window 3
Comments
Post a Comment