Modal Image with CSS and JavaScript
<p>In the following code, how do I adjust the code so that I can display more than 1 picture?</p>

<p>I am new to HTML.</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;h2&gt;Image Modal&lt;/h2&gt;
&lt;p&gt;In this example, we use CSS to create a modal (dialog box) that is hidden by default.&lt;/p&gt;
&lt;p&gt;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" attribute as an image caption text inside the modal.&lt;/p&gt;

&lt;img id="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200"&gt;

&lt;!-- The Modal --&gt;
&lt;div id="myModal" class="modal"&gt;
  &lt;span class="close"&gt;×&lt;/span&gt;
  &lt;img class="modal-content" id="img01"&gt;
  &lt;div id="caption"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>