Задать вопрос
@frezerto
javascript

Как сделать размытие при открытии popup окна на html?

Есть popup окно которое открывается с анимацией
html
<div class="modal-frame">
  <div class="modal">
		    <div class="modal-inset">
      			<div class="button close"><i class="fa fa-close"></i></div>
	
      <div class="modal-body">
				        <h3>Hello Title</h3>
        				<p>Hello Content</p>
        <p class="ps">Hello P.S.</p>
      			</div>
    		</div>
  	</div>
</div>
<div class="modal-overlay"></div>


<button class="fancy-btn open">Click</button>
css
@import "compass/css3";

* { box-sizing: border-box; }
html, body {
  width: 100%; height: 100%;
  position: relative;
  margin: 0; padding: 0;
  font-family: 'Noto Sans', sans-serif;
  font-weight: 400;
  font-size: 16px; line-height: 22px;
  background-color: #F2E1AC;
}

.fancy-btn {
  -webkit-appearance: none;
  cursor: pointer; outline: none; border: none;
  position: relative; top: 50%;
  display: block; min-width: 10%;
  line-height: 55px; font-size: 14px;
  text-transform: uppercase;
  margin: 0 auto; padding: 0 10px;
  background-color: #F2594B;
  color: #FFF;
  border-radius: 3px;
  @include transform(translateY(-50%));
  &:hover {
    background-color: lighten(#F2594B, 5%);
  }
}

// completely redoing the modal from the ground up.
.modal-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    margin: auto;
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    z-index: 40;

    @include transition(opacity .25s ease 0s, visibility linear .35s);
    &.state-show {
        opacity: .7;
        visibility: visible;
        @include transition-delay(0s);
        @include transition-duration(.2s, 0s);
    }
}

.modal-frame {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    margin: auto;
    z-index: 50;

/*     display: table; */
    @include display-flex;
    @include align-items(center);
    -moz-box-align: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    
    width: 100%;
    text-align: center;
    visibility: hidden;

    // animation classes and behavior
    &.state-appear {
        visibility: visible;
        .modal-inset {
            @include animation(modalComeIn .25s ease);
            visibility: visible; /* to keep @ final state */
        }
        .modal-body {
            opacity: 1;
            @include transform(translateY(0) scale(1,1))
        }
    }
    &.state-leave {
        visibility: visible;
        .modal-inset {
            @include animation(modalHeadOut .35s ease .1s);
            visibility: visible;
        }
        .modal-body {
            opacity: 0;
            @include transition-delay(0s);
            @include transition-duration(.35s);
            @include transition-timing-function(ease);
            @include transform(translateY(25px))
        }
    }
}
@-moz-document url-prefix() {
    .modal-frame {
        height: calc(100% - 55px);
    }
}

.modal {
    display: block;
    vertical-align: middle;
    text-align: center;
}
    .modal-inset {
        position: relative;
        padding: 60px;
        background-color: white;
        min-width: 320px;
        min-height: 126px;
        margin: auto;
        visibility: hidden;
        @include box-shadow(2px 2px 8px 1px rgba(0,0,0,.2));
        @include backface-visibility(hidden); // helps render animation
        @include transform(translate3d(0,0,0)); // helps render animation
        @include transform-style(preserve-3d); // helps render animation
        .close {
            display: block;
            cursor: pointer;
            position: absolute;
            top: 10px;
            right: 10px;
            padding: 10px;
            opacity: .4;
            &:hover {
              opacity: 1;
            }
        }
    }
        .modal-body {
            margin: auto;
            opacity: 0;
            @include transform(translateY(0) scale(.8, .8));
            @include transition-property(opacity, transform);
            @include transition-duration(.25s);
            @include transition-delay(.1s);
            h3 {
              font-weight: 700;
              padding-bottom: 22px;
              display: block;
              color: #F2594B;
              text-align: center;
            }
            p {
              padding-bottom: 20px;
            }
            .ps {
              font-size: 12px;
              opacity: .3;
            }
        }

@mixin keyframes($name) {
	@-webkit-keyframes #{$name} {
		@content;
	}
	@-moz-keyframes #{$name} {
		@content;
	}
	@keyframes #{$name} {
		@content;
	}
}

@include keyframes(modalComeIn) {
    0% {
        visibility: hidden;
        opacity: 0;
        @include transform(scale(.8, .8));
    }
    65.5% {
        @include transform(scale(1.03, 1.03));
    }
    100% {
        visibility: visible;
        opacity: 1;
        @include transform(scale(1, 1));
    }
}

@include keyframes(modalHeadOut) {
    0% {
        visibility: visible;
        opacity: 1;
        @include transform(translateY(0) scale(1, 1));
    }
    100% {
        visibility: hidden;
        opacity: 0;
        @include transform(translateY(35px) scale(.97, .97));
    }
}
js
$(document).on('ready', function(){
    $modal = $('.modal-frame');
    $overlay = $('.modal-overlay');

    /* Need this to clear out the keyframe classes so they dont clash with each other between ener/leave. Cheers. */
    $modal.bind('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e){
      if($modal.hasClass('state-leave')) {
        $modal.removeClass('state-leave');
      }
    });

    $('.close').on('click', function(){
      $overlay.removeClass('state-show');
      $modal.removeClass('state-appear').addClass('state-leave');
    });

    $('.open').on('click', function(){
      $overlay.addClass('state-show');
      $modal.removeClass('state-leave').addClass('state-appear');
    });

  });


и как сделать чтобы содержимое на заднем фоне размывалось?
  • Вопрос задан
  • 2862 просмотра
2 комментария
Подписаться 2 Оценить 2 комментария
Решения вопроса 1
@frezerto Автор вопроса
Короче что-то у меня получилось...
https://codepen.io/frezer/pen/JyoJqx
При клике на кнопку содержимое на заднем фоне размывается
Спасибо всем за помощь
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 2
AndrewHaze
@AndrewHaze
Умею гуглить яндексом
CSS Filter Example — Blur
Ответ написан
4 комментария
4 комментария
@id2669099
как вариант, при вызове модального окна, надо присвоить блоку, который нужно сделать размытым такой класс:
.blur {
  -webkit-filter: blur(5px);
     -moz-filter: blur(5px);
       -o-filter: blur(5px);
      -ms-filter: blur(5px);
          filter: blur(5px);
}

выглядит как-то так
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
Мэтч
от 80 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Изменить тему Shopify, добавить несколько категорий товаров
19 апр. 2024, в 18:11
10000 руб./за проект
Протестировать веб-сервис на Django и подготовить отчеты
19 апр. 2024, в 18:05
1000 руб./в час
Доработать проект на Django
19 апр. 2024, в 18:02
80000 руб./за проект
Ещё заказы