Vue implements scrollable pop-up window effect

This article shares the specific code of Vue to achieve the scrollable pop-up window effect for your reference. The specific content is as follows

This is the first implementation

Effect picture:

Pop-up window code:

Popup.vue

<template lang="html">
    <div v-if="show" class="modal-bg" @click="closeModal">
      <div class="modal_con">
        <div class="modal_content">
          <div class="modal-container">
            <div class="modal_main">
              <p class="modal-header">{{dataList.title}}</p>
              <div class="rules_text">
                <p
                  v-for="(item, index) in dataList.rules"
                  class="rules_txt"
                  :key="index"
                >
                  {{ item }}
                </p>
              </div>
          </div>
        </div>
          <div class="footer_rules">
            <div class="tips"></div>
              <div class="rules_button">
                <div class="button" @click="closeModal">
                  <p class="button_text">I understand</p>
                </div>
              </div>
            </div>
        </div>
      </div>

    </div>
</template>

<script>
export default {
  name: 'Popup',
  props: {
    show: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      dataList: {
        rules:
          '1. This is the first piece of data ahh ...
          '2. This is the second piece of data ahh ...
          '3. This is the third piece of data ahh ...
          '4. This is the fourth piece of data aa ...
        ],
        reward: [
          '1. Activity Rules Article 1 Data Data Data Data',
          '2. Activity Rules Article 2 Data Data Data',
          '2. Activity Rules Article 3 Data Data Data'
        ]

      }
    }
  },
  methods: {
    closeModal() {
      this.$emit('closeModal')
    },
  }
}
</script>

<style lang="css" scoped>
.modal_con {
  width: 80%;
  height: 287px;
  background: #ffffff;
  overflow: hidden;
  margin: 0 auto;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
}
.modal_content {
  height: 100%;
  background-color: #fff;
}
.modal-bg {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
.modal-container {
  height: 78%;
  text-align: center;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  /* ios requires the following attribute*/
  -webkit-overflow-scrolling: touch;
}

.rules_txt {
  font-size: 15px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: justify;
  color: #666666;
  padding: 0 20px;
  margin-top: 8px;
  margin-bottom: 0;
}

.rules_txt:last-child {
  padding-bottom: 40px;
}
.modal-header {
  font-size: 17px;
  font-family: PingFang, PingFang-SC;
  font-weight: bold;
  text-align: center;
  color: #333333;
  margin: 0;
  padding-top: 20px;
}
.reward_title {
  font-size: 17px;
  font-family: PingFang, PingFang-SC;
  font-weight: bold;
  text-align: center;
  color: #333333;
  padding: 0;
  margin-top: 14px;
  margin-bottom: 6px;
}
.footer_rules {
  width: 100%;
  height: 22%;
  position: absolute;
  bottom: 0;
}
.tips {
  /* width: 100%;
  opacity: 0.6;
  height: 49px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), #ffffff);
  text-align: center;
  line-height: 49px;
  font-size: 18px; */
}
.rules_button {
  width: 100%;
  background: #ffffff;
  padding-bottom: 20px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}
.button {
  width: 90%;
  display: flex;
  justify-content: center;
  align-content: center;
  background: linear-gradient(270deg, #1283ff, #50a3ff);
  border-radius: 4px;
  text-align: center;
  margin: 0 auto;
}
.button_text {
  font-size: 15px;
  font-family: PingFang, PingFang-SC;
  font-weight: SC;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-content: center;
  margin: 0;
  padding: 12px 0;
}
.rules_con {
  padding-bottom: 80px;
}
</style>

Use pop-up windows on the Home.vue page:

<!-- Event rules pop-up window-->
 <template>
<div>
 <div @click="clickPopup">
            <span>Click to pop up the pop-up window</span>
          </div>
 <Popup
      v-show="isRulesShow"
      @closeModal="isRulesShow = false"
      :show="isRulesShow"
    >
    </Popup>
</div>
</template>
<script>
import Popup from './Popup'
export default {
name:"Home",
components:
 Popup
},
data () {
    return {
      isRulesShow:flase
      }
    },
    watch:
    isRulesShow (v) {
      if (v) {
        //Disable the main page sliding method in main.js
        this.noScroll()
      } else {
        //The main page can slide this.canScroll()
      }
    },
  },
   methods:{
 //Activity rules pop-up window clickPopup () {
      this.isRulesShow = true
    },
 }
}
</script>
   <style lang="scss" scoped>
* {
  touch-action: pan-y;
}
</style>

Solve the problem that the body inside the pop-up window scrolls along with it

In main.js

//The pop-up box is prohibited from sliding Vue.prototype.noScroll = function () {
  var mo = function (e) { e.preventDefault() }
  document.body.style.overflow = 'hidden'
  document.addEventListener('touchmove', mo, false,{ passive: false })// Disable page sliding}
 
//The pop-up box can slide Vue.prototype.canScroll = function () {
  var mo = function (e) {
    e.preventDefault()
  }
  document.body.style.overflow = ''// Scroll bar appears document.removeEventListener('touchmove', mo, false,{ passive: false })
}

When using the page:

//Disable the main page from sliding this.noScroll()
//The main page can slide this.canScroll()

//Add styles as well:
* {
  touch-action: pan-y;
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Use Vue components to implement a simple pop-up effect
Summary of knowledge points about vue.js pop-up components
Great vue pop-up component
How to use the Vue pop-up message component
VUE implements a pop-up component that can be dragged at will
Vue implements the operation of clicking the button "View Details" to display the details list in a pop-up window
Detailed example of Vue's toast pop-up component
Destroy and hide operations when closing pop-up components in Vue
When Vue pops up, listen to the phone's return key to close the pop-up function (the page does not jump)
Use VUE to hide text information in the table when there are more than 5 characters and display all the characters when the mouse is moved

<<: MySQL explain obtains query instruction information principle and example

>>: How to use xshell to connect to Linux in VMware (2 methods)