Path: csiph.com!3.us.feeder.erje.net!feeder.erje.net!news.linkpendium.com!news.linkpendium.com!panix!not-for-mail From: ruben safir Newsgroups: comp.lang.javascript Subject: the definition of this Date: Sat, 7 Jul 2018 20:59:29 -0400 Organization: PANIX Public Access Internet and UNIX, NYC Lines: 76 Message-ID: NNTP-Posting-Host: www3.mrbrklyn.com Mime-Version: 1.0 Content-Type: text/plain; charset=utf-8 Content-Transfer-Encoding: 8bit X-Trace: reader1.panix.com 1531011576 3212 96.57.23.83 (8 Jul 2018 00:59:36 GMT) X-Complaints-To: abuse@panix.com NNTP-Posting-Date: Sun, 8 Jul 2018 00:59:36 +0000 (UTC) X-Mozilla-News-Host: news://news.panix.com:119 User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:52.0) Gecko/20100101 Thunderbird/52.8.0 Content-Language: en-US Xref: csiph.com comp.lang.javascript:35372 I was reviewing this simple program from the w3schools tutorials and it confused me. A short version of it looks like this: 77 transition: 0.3s; 78 } 79 80 .close:hover, 81 .close:focus { 82 color: #bbb; 83 text-decoration: none; 84 cursor: pointer; 85 } 86 87 /* 100% Image Width on Smaller Screens */ 88 @media only screen and (max-width: 700px){ 89 .modal-content { 90 width: 100%; 91 } 92 } 93 94 95 96 97

Image Modal

In this example, we use CSS to create a modal (dialog box) that is hidden by default.

We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attr ibute as an image caption text inside the modal.

100 101

102 103 104 109 110 132 133 134 So line 120 assigns the url for the clicked upon image into the mo.src variable and turns it on. But I would have thought that this would be a reference to the document object, not the image that was clicked, so obviously I am confused about the rules of object heiarchy. Otherwise, how is var mo visible within the function?