Inloggen
 
 
 
 
    
DHTML popup box
Location: BlogsFerry Onderwater - Developer    
Posted by: Ferry Onderwater 1-2-2006 0:00
We kennen het wel, we voeren een aktie uit op de server en willen de gebruiker op de hoogte stellen van het resultaat. Dus we gebruiken een javascript alert. Nadeel hiervan is dat de gebruiker op een knop moet drukken om het alert weg te halen en verder te kunnen werken. Eigenlijk willen we gewoon een informatief window dat vanzelf verdwijnt en waarbij de gebruiker gewoon verder kan werken, ook als de box er nog staat.
Behoefte: een popupbox waarin we een melding kunnen geven. Deze melding hoeft niet bevestigd te worden en ongeacht of de box wel of niet getoond wordt moet de gebruiker gewoon verder kunnen werken.

Oplossing: We gaan gebruik maken van een aantal technieken. We plaatsen een <DIV> in ons document, dit wordt de popup. Door gebruik te maken van DOM. JavaScript en CSS kunnen we hem plaatsen waar we willen en tonen/verbergen wanneer we willen. We kunnen het ding zelfs via een fade-in/fade-out laten verschijnen en verdwijnen.

We beginnen bij het begin, de HTML-kant:

Code:
        <div id="Alert" class="Alert"></div>

Het enige dat we doen is 'de box' plaatsen. Dit doen we helemaal 'onderin' de pagina. In de stylesheet zetten we de volgende code:

Code:
.Alert
{
    border: solid 1px black;
    width:200px;
    height:100px;
    background-color:Green;
    color:Black;
    font-weight:bold;
    visibility: hidden;
}

Onderaan onze pagina staat nu onze popup-box die nog niet echt als popupbox fungeert. Dit is waar ons eerste stukje javascript om de hoek komt kijken. We maken een apart bestand met onze javascript-code, alertBox.js.

Code:
// JScript File

var alertDiv;

function Start() {
    alertDiv = document.getElementById("Alert");
    if (!alertDiv) {
        alert('Error with finding alertboxes!!!');
    }
}


Deze code roepen we bij ieder page-load aan. Hij zoekt onze popup op zodat we er mee kunnen werken.

Nu maken we in HTML een knop aan waarmee we de popup kunnen tonen. We doen dit met het onclick-event. Een andere methode zou kunnen zijn om server-side een script te registreren met registerstartupscript. Uiteraard is het ook noodzakelijk om ons javascript te includen.

Code:
<head runat="server">
    ...
    <script language=javascript type="text/javascript" src=alertBox.js ></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="btnGreen" type="button" value="Green" onclick="showAlert('Yohoho', true);"/> <br />
        ........


Ok, we zien dus dat er een java-functie 'showAlert' wordt aangeroepen, in dit geval met twee parameters. De eerste parameter is de tekst die we in de box willen, de tweede is optioneel en geeft aan of we een fade-out willen. Niet zetten is gelijk aan false.

In de functie kijken we eerst of we de popup wel gevonden hebben in de Start-functie. Zo niet, dan tonen we een error.
Laten we er van uit gaan dat we hem wel gevonden hebben. We gaan dan eerst het midden van de pagina bepalen. Dit is in IE een echte draak en niet volledig goed af te vangen. Deze functie is ook van minder belang voor dit verhaal. In de sourcecode kun je hem eventueel bekijken.
We geven nu een aantal properties mee aan onze popupbox waardoor hij op de door ons gewenste positie geplaats wordt (style.position, style.left, style.top), zichtbaar wordt (style.visibility, style.display. hidden, style.filter en opacity) en de tekst gecentreerd geplaatst wordt (innerHTML). Om de tekst goed te centreren gebruiken we een tabel met één cel.
De properties style.filter en opacity hebben beiden te maken met het fade-in/out verhaal.

Nu volgt een belangrijk stukje van onze popupbox. We willen wel dat hij na een bepaalde tijd weer verdwijnt. Dit doen we door gebruik te maken van setTimeout. Daarmee geven we twee zaken aan:
1) Welke code willen we na verloop van tijd uitvoeren en
2) Na hoeveel tijd willen we dat?

Het laatste stukje code is ook weer erg belangrijk maar behandelen we zo.

Code:
function showAlert(text, fadeout) {
    if (!alertDiv) {
        alert('Error with finding alertboxes!!!');
    } else {
        center = GetCenter();
        alertDiv.style.position = "absolute";
        alertDiv.style.left = center.x - 50;
        alertDiv.style.top = center.y - 100;
        alertDiv.style.visibility = "visible";
        alertDiv.style.display = "block";
        alertDiv.hidden = "false";
        alertDiv.style.filter = 'alpha(opacity = 100)';
        alertDiv.opacity = 100;
        alertDiv.innerHTML = '<TABLE border="0" cellpadding="0" cellspacing="0" height="100%" width="100%"><TR><TD align="center">' + text + '</TD></TR></TABLE>';
        if (!fadeout && fadeout != 'true')
            setTimeout("hideAlert()", 1000);
        else
            setTimeout("FadeOut()", 1000);
        CoverUp();
    }
}


Waarom is de functie CoverUp nu zo belangrijk? Stel dat we deze niet uitvoeren... Een popup ziet er dan als volgt uit:
Je ziet dat onze popup wel over een paar textboxen (input type=text) wordt geplaats zoals verwacht, maar dat de dropdownlist (select) over de popup komt te staan.
Dit gedrag vinden we bij drie soorten objecten: applet, iframe en select. Hoe kunnen we er nu voor zorgen dat onze popup toch goed getoond wordt?
Hier komt de functie 'CoverUp()' om de hoek kijken. We gaan namelijk op het moment dat zo'n control in hetzelfde gebied zit als onze popup de betreffende control verbergen totdat de popup weer verdwenen is.

Code:
function CoverUp() {
    function getVisib(obj){
        var value = obj.style.visibility;
        if (!value) {
            if (obj.currentStyle) { // IE
                value = obj.currentStyle.visibility;
            } else
                value = '';
        }
        return value;
    };

    var tags = new Array("applet", "iframe", "select");
    var el = document.getElementById('Alert');

    var p = GetAbsolutePosition(el);
    var EX1 = p.x;
    var EX2 = el.offsetWidth + EX1;
    var EY1 = p.y;
    var EY2 = el.offsetHeight + EY1;

    for (var k = tags.length; k > 0; ) {
        var ar = document.getElementsByTagName(tags[--k]);
        var cc = null;

        for (var i = 0; i < ar.length; i++) {
            cc = ar[i];

            p = GetAbsolutePosition(cc);
            var CX1 = p.x;
            var CX2 = cc.offsetWidth + CX1;
            var CY1 = p.y;
            var CY2 = cc.offsetHeight + CY1;

            if (cc.style.visibility == "hidden" || (CX1 > EX2) || (CX2 < EX1) || (CY1 > EY2) || (CY2 < EY1)) {
                if (!cc.__msh_save_visibility) {
                    cc.__msh_save_visibility = getVisib(cc);
                }
                cc.style.visibility = cc.__msh_save_visibility;
            } else {
                if (!cc.__msh_save_visibility) {
                    cc.__msh_save_visibility = getVisib(cc);
                }
                //alert(getVisib(cc));
                cc.style.visibility = "hidden";
            }
        }
    }
}

De functie getVisib geeft als waarde terug wat de visibility is van het meegegeven object. Meestal zal dit 'inherit' zijn behalve als het specifiek aangegeven is.
Eerst wordt er een array opgebouwd met daarin de tags die we willen verbergen. Vervolgens zoeken we onze box op (dit kan dus handiger aangezien we dat al gedaan hebben, puntje voor verbetering) en gaan we de absolute posities van de box bepalen. Dit doen we met de functie GetAbsolutePosition. Ook dit valt enigzins buiten de scope van het verhaal, dus zie de sourcecode.

Nu gaan we voor elk van deze tags het document doorlopen op instances van de tag. Voor al deze instances wordt bekeken of ze binnen hetzelfde gebied vallen als onze box. We onthouden zowiezo de 'huidige' status van de visibility, zodat we straks als de popupbox weer weg is alle in originele staat achter kunnen laten. Als de instance overlapt met onze box zetten we de visibility op hidden en ons probleem is opgelost. Het ziet er dan als volgt uit:


Permalink |  Trackback
  
 
Weblogs
    
Archief
    
Zoeken
    
 
 
 
 
Copyright 2006-2009 by Arcencus
Privacy Statement | Terms Of Use