0

Я всех приветствую! Помогите, пожалуйста, доработать скрипт модального окна. Это окно является справкой для пользователя. Мне нужно, чтобы по умолчанию окно было уже в открытом состоянии, а кнопка открытия была недоступна. При закрытии окна нужен один из двух эффектов (какой возможно сделать): 1) окно закрывается, после чего сразу в этом же месте появляется кнопка открытия, и тут же она перемещается видимым образом в правый верхний угол экрана. 2) окно закрывается, после чего появляется кнопка открытия уже сразу в правом верхнем углу экрана, с анимацией (анимация в виде колокольчика что ли, для привлечения внимания пользователя.) Очень прошу помощи! Благодарю!

html:

<button class="click">Открыть</button>
<div class="message">Сообщение
  <button class="okay">Закрыть</button>
</div>

css:

.click {
  display: block;
  height: 80px;
  width: 300px;
  position: absolute;
  background: #260016;
}
.message {
  position: absolute;
  top: calc(50% - 140px);
  left: calc(50% - 300px);
  width: 600px;
  height: 280px;
  z-index: 1000;
  background: #fff;
  color: button;
  padding: 60px;
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  border-radius: 6px;
  -webkit-transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
          transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  opacity: 0;
}
.message.active {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}
.okay {
  display: block;
  height: 80px;
  width: 300px;
  background: #e68a6c;
}

js:

(function() {
  $(function() {
    // открываем окно
    $('button').click(function(evt){
      evt.stopPropagation();
      $('.message').addClass('active');
    });
    // закрываем окно
    $('.message').click(function(evt){
      evt.stopPropagation();
    });
    $(document).add('.okay').click(function() {
      $('.message').removeClass('active');
    });
  });
}).call(this);

1 ответ 1

2

Доработай так(этот скрипт надо вставить в дополнение к существующему у тебя):

$(document).ready(function() {
    $('button').click(function() {
        $(this).hide().css('opacity', '0')
    });
    $('button').click();

    $('.okay').click(function() {
        $('.click').show()
            .css('transition', 'all 500ms cubic-bezier(0.42, 0, 0.58, 1) 0s')
            .css('opacity', '1')
            .css('position', 'fixed')
            .css('left', '0px')
            .css('height', 'opx');
    });

});

Суть в общем ясна должна быть.

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.