Aizēnots div bloks

Code · May 16, 2010

Gan jau visi ir redzējuši (parasti, kad parādās ajax izmantošana) kā lapa paliek tumšāka un parādās kaut kādi loadingi vai "modālie" logi. Vēlos ko līdzīgu, bet man nevajag, lai aizēnojas visa lapa, bet tikai noteikta daļa. Lapā pa vidu ir viens DIV bloks, kurš dinamiski staipās līdz ar tā saturu, vēlos panākt, lai tikai šis dinamiskais bloks tiktu aizēnots, bet arī, lai šī bloka saturs nav pieejams, respektīvi, ja tur ir kāda poga, tad, lai to nav iespējams uzspiest. Kā to var panākt?

emsy · May 16, 2010

Uzliec kādam citam divam pozīciju absolūtu un fonu baltu, melnu, tas vienalga, tad uzliec opacity uz +/- 0.5, ar marginiem un width/height aizbīdi vajadzīgajā vietā ;)

Code · May 16, 2010

Nu jā, tik tālu viss ir skaisti, bet kā lai es zinu, kur bīdīt, ja bloks ir dinamisks? JS?

briedis · May 16, 2010

Nu jā, tik tālu viss ir skaisti, bet kā lai es zinu, kur bīdīt, ja bloks ir dinamisks? JS?

Nāksies js izmantot.

Ar jquery varētu viegli to izdarīt.

Atrast aizēnojamo elementu, dabūt viņa pozīciju, izmērus, dinamiski izveidot jaunu elementu, piešķirt vajadzīgos stilus, un pievienot to DOM struktūrai aizēnojot vajadzīgo elementu...

emsy · May 16, 2010

Ja nemaldos ar clone() būs diezgan ātri, vnk noklonē elementu ar visu stilu un īpašībām un viss.

Code · May 16, 2010

Tāda doma bija, bet negribējās izmantot. Kaut kā šķiet, ka ar pliku CSS varētu tikt galā.

codez · May 16, 2010

Ja overlay-u pievieno tam pašam elementam un elementam ir position:relative, tad var ar CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"> </script>
<script>
$(function(){
 $('#btn').click(function(){
   $('<div class="overlay"></div>')
     .click(function(){$(this).remove();})
     .appendTo('#bloks');
 });
});
</script>
<style>
#bloks{
 position:relative;
 margin:20px;
 width:200px;
 border:1px solid #888;
}
.overlay{
 position:absolute;
 width:100%;
 height:100%;
 top:0px;
 left:0px;
 background:#888; 
 opacity:0.5;
}
</style>
</head>
<body>
asfasdfas<br>
dfasdfasdfa<br>
<div id="bloks" style="">
 sdfsf sdf gs dfg sd fg df<br />
 sdfsf sdf gs dfg sd fg df<br />
 <button onclick="alert(1);">alert</button><br />
 sdfsf sdf gs dfg sd fg df<br />
 sdfsf sdf gs dfg sd fg df<br />
</div>
dfgsdf sdf <br />
<button id="btn">click</button>
</body>
</html>

Edited May 16, 2010 by codez

Code · May 16, 2010

Nu bļin. Tik vien ko man vajadzēja - DIV'am uzlikt relative. Netieka nodefinēts un defaultā viņš laikam lika static, kurš visu maisīja. Paldies, tagad viss ok! :)

Iepriekš jau paspēju sadomāt JS, kurš it kā atrisināja problēmu, bet nu labāk pie CSS palieku.

Ja nu kādam kādreiz parādās vajadzība:

document.getElementById("eenotais_bloks").style.height=document.getElementById("dinamiskais_bloks").offsetHeight+'px';
document.getElementById("eenotais_bloks").style.top=document.getElementById("dinamiskais_bloks").offsetTop+'px';

Sign In

Aizēnots div bloks

Recommended Posts

Code

emsy

Code

briedis

emsy

Code

codez

Code

Join the conversation

Browse

Activity