show popup and disable background

Status
Niet open voor verdere reacties.
V

VBMichael

Gebruiker
Lid geworden
16 jan 2010
Berichten
32
Ik zit met een volgende vraag:

als ik op een knop in mijn asp.net pagina klik moet er een popup verschijnen waarbij dan de achteraan vastgezet moet worden zodat de gebruiker eerst de popup moet bewerken voor alleer hij kan verder surfen.

In bijlage heb ik een foto toegevoegd van een voorbeeld over hoe het zou moeten zijn! ( javascript.png )

Ik maak een nieuwe div aan over mijn hele pagina met daarin dan de popup toegevoegd. Dit werkt als mijn pagina maximaal is. Als ik heb verklein dan gaat mijn div ( de zwarte achtergrond ) ook verkleinen zodat sommige knoppen wel weer aangeklikt kunnen worden. ( zie bijlage schermafdruk.png )

Hoe kan ik dit voorkomen ?
 

Bijlagen

  • javascript.jpg
    javascript.jpg
    89,2 KB · Weergaven: 44
  • Schermafdruk.jpg
    Schermafdruk.jpg
    100,7 KB · Weergaven: 67
[JS]
function createPopupEmails(targeturl, tagname, cssclass) {
if (!document.getElementById(tagname))
{
var container;
if(!document.getElementById('container')) {
container = document.createElement('div');
container.id = 'container';
container.style.position = 'absolute';
container.style.top = '0px';
container.style.left = '0px';
container.style.width = '100%';
container.style.height = '200%';
container.style.backgroundImage = "url('./images/pattern_back.png')";
container.style.backgroundRepeat = 'repeat';
container.style.display = 'block';
document.body.appendChild(container);
}

var elem = document.createElement('div');
elem.id = tagname;
elem.className = cssclass;
elem.innerHTML = 'hier komt dan nog een table en dergelijke .....';

container.appendChild(elem);
}
ClearEmails();
}

[/JS]

Dit is de code die ik gebruik om een achtergrond div te creeeren zodat heel de website niet meer bereikbaar wordt als de popup verschijint.
 
[js]<style type="text/css">
html, body: { height: 100%;}
</style>[/js]
Misschien? :)

css kan nogal moeilijk doen met height, de procenten van de div gebruiken het parent element waarvan de hoogte mogelijk niet goed vastligt.

1200px bij de hoogte van de div opgeven zou ook nog kunnen. :)
[js]container.style.height = '1200px';[/js]
 
Als het dynamisch moet zijn, kan het misschien in grote lijnen zo:
Code: 
#popUp {
    .... de styles kunnen hier alvast in
    display: none;
}
HTML: 
<body>
    <div id="popUp">&nbsp;</div><!-- nog leeg -->
    <div id ="everything">
         .... de hele pagina
         met ergens:
         <a href="#naks" onclick="showPop(); return false">popperdepop</a>
    </div>
</body>
[JS]var alles = document.getElementById('everything');
var popContent = document.getElementById('popUp');

function showPop(){
popContent.innerHTML = '<table><tr><td>... met ergens: <a href="#naks" onclick="popKlaar(); return false;">wegwezen<\/a>...<\/td><\/tr><\/table>';
alles.style.display = "none";
popContent.style.display = "block";
}
function popKlaar(){
popContent.innerHTML ="&nbsp;"; // reset, als nodig
popContent.style.display = "none";
alles.style.display = "block";
}[/JS]
En als het niet dynamisch hoeft, kan de inhoud van de popup al klaargezet worden, en hoeft er alleen maar een togglePop() functie te zijn die afwisselend de content en de pop aanzet. Hiermee omzeil je alles van de hoogte en/of breedte van de content. Die is gewoon verdonkeremaand als je de pop ziet. :)
Idee?

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Thx egel heb lmijn hoogte op 1300 px gezet deze blijft nu zwart! En de site blijft onkliklbaar...
 
Mooi! :thumb:
In de tussentijd heb ik in een ander draadje een voorbeeld van m'n hierboven omschreven verduister-systeem gezet:
In plaats van de grote afbeelding kan daar natuurlijk ook een willekeurig ander element gepresenteerd worden (zoals je tabel). - Maar dat zal nu niet meer nodig zijn.

Met vriendelijke groet,
CSShunter

PS: heb je ook een alternatief voor mensen die de site zonder javascript (bv. met een pure txt-browser) bezoeken?
 
csshunter zei:
Mooi! :thumb:
In de tussentijd heb ik in een ander draadje een voorbeeld van m'n hierboven omschreven verduister-systeem gezet:
In plaats van de grote afbeelding kan daar natuurlijk ook een willekeurig ander element gepresenteerd worden (zoals je tabel). - Maar dat zal nu niet meer nodig zijn.

Met vriendelijke groet,
CSShunter

PS: heb je ook een alternatief voor mensen die de site zonder javascript (bv. met een pure txt-browser) bezoeken?
Klik om te vergroten...

Bedankt voor de post ga deze ook eens bekijken euhm neen er zit redelijk veel javascript in mijn project heb daar niet aan gedacht eerlijk gezegd....
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan