How to implement picture pop-up and modal box display in Vue?

How to implement image pop-up and modal box display in Vue?

In web development, it is often necessary to click on a picture to pop up a modal box to display the large image of the picture. Vue, as a popular JavaScript framework, can easily complete this function. This article will introduce how to use Vue to implement image pop-up and modal box display.

First, we need a picture list, which can be defined through the data attribute. Suppose we have an array containing image URLs, which can be initialized in Vue's data attribute:

data() {
  return {
    imageList: [
      'https://example.com/image1.jpg',
      'https://example.com/image2.jpg',
      'https://example.com/image3.jpg'
    ],
    showModal: false, // 控制模态框显示与隐藏的变量
    selectedImage: '' // 记录当前选中的图片URL
  }
}

Next, traverse the imageList in the template, create a click event handler for each image, and bind it to On the corresponding picture:

<template>
  <div>
    <div v-for="image in imageList" :key="image">
      <img  :src="image" @click="showModal = true; selectedImage = image" alt="How to implement picture pop-up and modal box display in Vue?" >
    </div>
    <div v-if="showModal" class="modal">
      <div class="modal-content">
        <span class="close" @click="showModal = false">&times;</span>
        <img  :src="selectedImage" alt="How to implement picture pop-up and modal box display in Vue?" >
      </div>
    </div>
  </div>
</template>

In the above code, we use the v-for instruction to traverse the imageList and add a click event handler for each picture. When the user clicks on a picture, we set the showModal attribute to true and assign the currently clicked picture URL to selectedImage. This will display the image clicked by the user in the modal box.

It should be noted that we also use the v-if instruction to control the display and hiding of the modal box. When the showModal property is true, the modal box is displayed; when the showModal property is false, the modal box is hidden.

At the same time, we also bound a click event handler function to the close button in the modal box to close the modal box.

Finally, we can define the style of the modal box in CSS:

<style>
.modal {
  display: block; /* 显示模态框 */
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
</style>

In the above CSS, we use the position attribute to fix the modal box above the screen. At the same time, we set a translucent background color so that when the modal box appears, the background darkens and the image is highlighted.

So far, we have implemented the pop-up and modal box display functions of pictures in Vue. When the user clicks on the image, a modal box containing the large image will pop up. The user can close the modal by clicking the close button.

This effect can greatly improve the user's image browsing experience, and also demonstrates the flexibility and convenience of Vue as a powerful framework.

The above is the detailed content of How to implement picture pop-up and modal box display in Vue?. For more information, please follow other related articles on the PHP Chinese website!