login  Naam:   Wachtwoord: 
Registreer je!
 Forum

geneste popups

Offline Thomas - 22/01/2015 17:15 (laatste wijziging 22/01/2015 17:19)
Avatar van ThomasModerator Het idee
Voor wat complexere backends heb ik waarschijnlijk op den duur meerdere gerelateerde informatieschermen nodig die soortgelijke data bijwerken, waarbij ik steeds verder inzoom op de informatie die ik wil aanpassen. Het idee is dat ik daarvoor meerdere popups gebruik.

De uitdagingen
Ondertussen ben ik al tegen een aantal dingen aan gelopen:
* Als je een (of meerdere) popup(s) opent, wil je de onderliggende pagina('s) waarschijnlijk "vergrendelen" zodat je alleen informatie kunt wijzigen op het laagste gelegen niveau. Dit omdat je wijzigingen mogelijk van invloed zijn op informatie uit bovengelegen niveau's.

Oplossing: vanuit de popup zet je een absoluut gepositioneerde div over de inhoud van je parent window, en deze verwijder je weer wanneer je de popup sluit.

* Je schakelt tussen applicaties en je popup volgorde raakt ontregeld en/of je raakt je "actieve" popup kwijt

Oplossing: door het klikken op een "inactief" window wordt de bijbehorende popup gefocust. Dit proces kun je herhalen totdat je de laatst geopende (actieve) popup bereikt

* Als je een popup sluit via een link moet het parent window weer ontgrendeld worden. Ook als je op het kruisje (de X knop van het window) klikt.

Oplossing: schrijf code (bijvoorbeeld een functie) voor zowel deze link klik als het onbeforeunload event.

* Je wilt de inhoud van een popup kunnen herladen.
In de huidige opzet wordt daarmee het onbeforeunload event getriggerd, wat er waarschijnlijk mede voor zorgt dat de popup gesloten wordt. Dit willen we niet.

Oplossing: voorzie links / acties die de pagina verversen van code die het onbeforeunload onklaar maakt (en als de pagina herladen is staat deze weer "op scherp".

* Als je klaar bent met een popup dan kan dit gevolgen hebben voor de samenstelling van de informatie van het bovengelegen scherm. Je hebt bijvoorbeeld in de popup gegevens aangepast die op het bovengelegen scherm al werden weergegeven. Dit scherm zou dus ververst moeten worden (zonder dat deze gesloten wordt ).

Oplossing: combineer dit in de code die zorgt voor het sluiten van de huidige popup.

Voorlopige opzet
Okay, sommige dingen zijn nog hardcoded, ook gebruik ik (nog) geen jQuery voor betere crossbrowser compatibiliteit, maar de volgende code werkt al best aardig. Hierin zijn alle bovenstaande punten / wensen verwerkt en het werkt al best intuitief.

popup.js
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var popupWindow = null;
  2. var popupOpener = window.opener;
  3.  
  4. // Note that the popup name must be unique.
  5. function popup(url, name) {
  6.     var left = window.screenX;
  7.     var top = window.screenY;
  8.     popupWindow = window.open(url, name, 'left='+(left + 50)+',top='+(top + 25)+',width=640,height=480');
  9.     return false;
  10. }
  11.  
  12. function focusPopup() {
  13.     if (window.popupWindow) {
  14.         popupWindow.focus();
  15.     }
  16. }
  17.  
  18. // For use inside popups
  19. // as an alternative, you could add an event listener to the popupWindow
  20. // when it completes loading you can execute a callback function
  21. // @see http://stackoverflow.com/questions/1372022/waiting-for-child-window-loading-to-complete
  22. function popupOnLoad() {
  23.     var parentOverlay = popupOpener.document.getElementById('overlay');
  24.     parentOverlay.style.display = 'block';
  25. }
  26.  
  27. // close as reserved name does not work well
  28. function popupClose(refreshParent) {
  29.     var parentOverlay = popupOpener.document.getElementById('overlay');
  30.     parentOverlay.style.display = 'none';
  31.     // popupOpener.focus(); // does not work, needs to be called from creator?
  32.     if (refreshParent) {
  33.         popupOpener.disablePopupClose();
  34.         popupOpener.location.reload();
  35.     }
  36.     window.close();
  37.     return false;
  38. }
  39.  
  40. // temporarily disable onbeforeunload so popup does not close when refreshing content
  41. function disablePopupClose() {
  42.     window.onbeforeunload = null;
  43. }


style.css
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #overlay { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 999; background-color: #666666; display: none; opacity: 0.9; }


index.htm
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html>
  4. <meta charset="UTF-8">
  5. <title>popup test</title>
  6. <link rel="stylesheet" type="text/css" href="style.css" />
  7. <script type="text/javascript" src="popup.js"></script>
  8. </head>
  9.  
  11. <div id="overlay" onclick="focusPopup()"></div>
  12. <a href="javascript:void(0)" onclick="return popup('popup.htm', 'een');">popup</a>
  13. </body>
  14. </html>


popup.htm (popup level 1)
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html>
  4. <meta charset="UTF-8">
  5. <title>popup test</title>
  6. <link rel="stylesheet" type="text/css" href="style.css" />
  7. <script type="text/javascript" src="popup.js"></script>
  8. </head>
  9.  
  10. <body onbeforeunload="popupClose()">
  11. <div id="overlay" onclick="focusPopup()"></div>
  12. <a href="javascript:void(0)" onclick="return popup('popup2.htm', 'twee')">another popup</a>
  13. <a href="popup.htm" onclick="disablePopupClose()">refresh me</a>
  14. <a href="javascript:void(0)" onclick="return popupClose(false)">close</a>
  15.  
  16. <script type="text/javascript">
  17. //<![CDATA[
  18. // you probably only want to call this the first time you load this popup
  19. popupOnLoad();
  20. alert('loaded');
  21. //]]>
  23. </body>
  24. </html>


popup2.htm (popup level 2)
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html>
  4. <meta charset="UTF-8">
  5. <title>popup test 2</title>
  6. <style type="text/css">
  8. <link rel="stylesheet" type="text/css" href="style.css" />
  9. <script type="text/javascript" src="popup.js"></script>
  10. </head>
  11.  
  12. <body onbeforeunload="popupClose()">
  13. <div id="overlay"></div>
  14. <a href="javascript:void(0)" onclick="return popupClose(false)">close</a>
  15. <a href="javascript:void(0)" onclick="return popupClose(true)">close and refresh</a>
  16.  
  17. <script type="text/javascript">
  18. //<![CDATA[
  19. // you probably only want to call this the first time you load this popup
  20. popupOnLoad();
  21. //]]>
  23. </body>
  24. </html>


Of probeer het hier uit.

Ideeën / suggesties?

2 antwoorden

Gesponsorde links
Offline vinTage - 23/01/2015 21:11
Avatar van vinTage Nieuw lid Interessant!
Wel zou ik sowieso de href's in tact houden, zodat zonder js alsnog de inhoud van de pagina/popup te vinden is.
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <a href="javascript:void(0)"


Een totaal ander idee zou i.m.h.o kunnen zijn een modal dialog waarin je back and forward kunt gaan, geen gedester met popups/tig vensters.
Offline Thomas - 23/01/2015 22:02
Avatar van Thomas Moderator
Citaat:
Wel zou ik sowieso de href's in tact houden, zodat zonder js alsnog de inhoud van de pagina/popup te vinden is.
Nou nee, dat wil ik juist niet, omdat als je bijvoorbeeld in een popup informatie aanpast, dan kan dat van invloed zijn op de informatie van een ondergelegen pagina/popup - dat is juist de reden dat ik deze structuur wil "afdwingen", ik wil niet in staat zijn om die pagina's naast elkaar te openen (in tabs). Afdwingen tussen quotes, omdat je er toch wel omheen kunt, maar het is duidelijk dat dat niet de bedoeling is als je zo'n toren van popups hebt waarbij je er maar 1 tegelijkertijd kunt wijzigen.

Citaat:
Een totaal ander idee zou i.m.h.o kunnen zijn een modal dialog waarin je back and forward kunt gaan, geen gedester met popups/tig vensters.
Het probleem daarbij is, als je met modal dialogs een soort van floatende divs bedoelt (denk aan lightbox enzo) dat deze in je browservenster/viewport/hoe-je-het-ook-noemt zitten en daarmee hier ook door begrensd zijn. Dit kan voor problemen zorgen als, om wat voor reden dan ook, deze ruimte (te) beperkt is.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.194s