1

Добрый день! Помогите, пожалуйста, доработать скрипт модального окна. Нужно сделать так, чтобы по умолчанию, т.е. при открытии страницы модальное окно уже было открытым, и при этом кнопка открытия окна была недоступна. Окно закрываем, кнопка открытия появляется. Нажимаем на кнопку, окно открывается, а кнопка становится недоступна. Нужна такая логика. Спасибо большой за помощь!

(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);
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">Открыть</button>
<div class="message">Сообщение
  <button class="okay">Закрыть</button>
</div>

2 ответа 2

1

Чтобы показать при загрузке, нужно просто сразу же вызвать обработчик показа. А также, нужно добавить в необходимых местах вызов функции, которая будет скрывать или показывать основную кнопку, например так:

$(function() {
  // закрываем окно
  $('.message').click(function(evt) {
    evt.stopPropagation();
  });
  $(document).add('.okay').click(function() {
    $('.click').show(); // показываем кнопку
    $('.message').removeClass('active');
  });
  // открываем окно
  $('.click').click(function(evt) {
    evt.stopPropagation();
    $(this).hide(); //скрываем кнопку
    $('.message').addClass('active');
  }).click();
});
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">Открыть</button>
<div class="message">Сообщение
  <button class="okay">Закрыть</button>
</div>

1

По сути, надо те действия, которые выполняются для открытия окна по нажатию, выполнить при загрузке страницы. И после открытия окна установить блокирование кнопки добавлением ей атрибута disabled:

(function() {
  $(function() {
    // открываем окно при загрузке страницы
    $('.message').addClass('active');
    $('.click').attr('disabled', true);
    // открываем окно по нажатию кнопки
    $('button').click(function(evt) {
      evt.stopPropagation();
      $('.message').addClass('active');
      $(this).attr('disabled', true);
    });
    // закрываем окно
    $('.message').click(function(evt) {
      evt.stopPropagation();
    });
    $(document).add('.okay').click(function() {
      $('.message').removeClass('active');
      $('button').attr('disabled', false);
    });
  });
}).call(this);
.click {
  display: block;
  height: 80px;
  width: 300px;
  position: absolute;
  background: #260016;
  color: #fff;
}
.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;
}
button:disabled {
  background: silver;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">Открыть</button>
<div class="message">Сообщение
  <button class="okay">Закрыть</button>
</div>

Ваш ответ

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

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