Jump to content
php.lv forumi

Aizēnots div bloks


Code

Recommended Posts

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?

Link to comment
Share on other sites

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ā ;)

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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 by codez
Link to comment
Share on other sites

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';

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...