Как отключить вертикальную прокрутку и визуализировать модальное изображение в текущей позиции страницы, а не в верхней части страницы? - PullRequest
Новая
       45

Как отключить вертикальную прокрутку и визуализировать модальное изображение в текущей позиции страницы, а не в верхней части страницы?

0 голосов
/ 01 мая 2020

Это мой единственный файл Vue компонент, который имеет модальное значение. 

<template>
  <div>
    <div class="container">      
      <div class="sidebar">
        <button class="sidebar__gradient-button" @click="setModalVisible(true)" >Open Modal</button>
      </div>
    </div>

    <!-- Modal -->
    <div v-if="modalVisible" class="modal">
      <div class="modal__card">
        <div class="modal__card__container">
          ...
        </div>
        <div class="modal__close-button" @click="setModalVisible(false)">×</div>
      </div>
    </div>
    <!-- Modal -->

    <!-- Modal Overlay -->
    <div v-if="modalVisible" class="overlay" />
    <!-- Modal Overlay -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      modalVisible: false
    };
  },
  methods: {
    setModalVisible: function(val) {
      console.log(val);
      return (this.modalVisible = val);
    }
  }
};
</script>

<style lang="scss">
@import "../../sass/app.scss";
</style>

На меньших экранах модальная кнопка открытия не находится вверху страницы, однако, модальный и оверлейный рендер вверху страницы.

Я хотел бы сделать две вещи:

  1. Отключить вертикальную прокрутку
  2. Визуализация модального и оверлейного в текущей позиции на странице (я не хочу делать прокрутку вверх, и я настроен против jQuery: D)

Вот стиль для модала в Sass: 

.modal {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    margin-top: 130px;
    @media #{$breakpoint-sm} {
        margin-top: 0;
        align-items: center;
        @media #{$breakpoint-md} {
        }
    }
}

.modal__card {
    z-index: 1000;
    height: 272px;
    width: 355px;
    box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.5);
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    @media #{$breakpoint-sm} {
        height: 310px;
        width: 570px;
        @media #{$breakpoint-md} {
        }
    }
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #262626;
    opacity: 0.8;
    mix-blend-mode: normal;
}

Пожалуйста, помогите. Я полагаю, что свойство top должно быть как-то динамически установлено. Спасибо за ваше время.

1 Ответ

0 голосов
/ 01 мая 2020

Вы можете добавить переполнение: скрытый и отступ справа на теле, когда модальное окно открыто, чтобы заменить ширину полосы прокрутки этой функцией 

function getScrollbarWidth() {
  return window.innerWidth - document.documentElement.clientWidth;
}
...