Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use CSS and JavaScript to render pictures of the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, with a certain reference value, I believe that everyone after reading this article on how to use CSS and JavaScript to render pictures will have a harvest, let's take a look.

First, we use CSS to create modal windows (dialogs), which are hidden by default.

Then, we use JavaScript to display the modal window, and when we click on the picture, the picture will appear in the pop-up window:

Case study

/ / get the modal window

Var modal = document.getElementById ('myModal')

/ / get the picture mode box, and the alt attribute pops up the text description as the picture.

Var img = document.getElementById ('myImg')

Var modalImg = document.getElementById ("img01")

Var captionText = document.getElementById ("caption")

Img.onclick = function () {

Modal.style.display = "block"

ModalImg.src = this.src

ModalImg.alt = this.alt

Captiontext [XSS _ clean] = this.alt

}

/ / Get the element that closes the modal

Var span = document.getElementsByClassName ("close") [0]

/ / When the user clicks on (x), close the modal

Span.onclick = function () {

Modal.style.display = "none"

}

This is the end of the article on "how to render pictures with CSS and JavaScript". Thank you for reading! I believe you all have a certain understanding of "how to render pictures with CSS and JavaScript". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.