2

Создала модальное окно, которое должно вызываться при нажатии на кнопку и по нажатию на кнопки ок или cancel должны в консоле соответствующие сообщения выходить. В данный момент в консоле показывает ошибки и модальное окно после нажатия кнопки не исчезает, не смогла понять почему.

$(() => {
  $('.backdrop').hide();
  $('.newConfirm').hide();
  let agree = $('.ok').on('click', () => console.log('User pressed OK'));
  let disagree = $('.cancel').on('click', () => console.log('User pressed cancel'));

  let createConfirm = (text, callback1, callback2) => {
    $('.backdrop').show();
    $('.newConfirm').show();
    $('.title').text(text);
    callback1(item);
    callback2(item);
  };
  $('.rules').on('click', () => {
    createConfirm('Are you accept with rules?', agree, disagree);
  });
});
body {
  background: rgb(189, 221, 189);
}

.rules {
  width: 200px;
  height: 50px;
  background: grey;
  color: #fff;
  border-radius: 5px;
  margin: 100px 40%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.rules:active {
  background: rgb(226, 225, 225);
  color: grey;
}

.backdrop {
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  top: 0;
  left: 0;
}

.newConfirm {
  width: 400px;
  height: 150px;
  background: #fff;
  z-index: 1100;
  position: absolute;
  margin-left: 35%;
  border-radius: 3px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.title,
.textForConfirm {
  font-family: Arial, Helvetica, sans-serif;
  color: gray;
}

.title {
  font-size: 30px;
}

.textForConfirm {
  font-size: 20px;
}

.ok,
.cancel {
  width: 80px;
  height: 30px;
  background: #3498DB;
  border: 1px solid #3498DB;
  border-radius: 5px;
  color: #fff;
  padding: 5px;
}

.but {
  width: 170px;
  display: flex;
  justify-content: space-between;
  margin-left: 210px;
}

.ok:active,
.cancel:active {
  background: #246997;
  border: none;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div class="rules">RULES</div>
<div class="backdrop"></div>
<div class="newConfirm">
  <div class="title"></div>
  <div class="but">
    <button class="ok">OKAY</button>
    <button class="cancel">CANCEL</button>
  </div>
</div>

https://jsfiddle.net/botagoz/z6myk8xa/2/

4
  • А что за ошибки то? 12 авг 2020 в 6:15
  • Что такое переменная item в callback1(item)? 12 авг 2020 в 6:19
  • после добавления текста, вызвать функцию agree disagree
    – bota
    12 авг 2020 в 12:45
  • У вас item не определена. Нигде в коде она не создается. 12 авг 2020 в 13:17

3 ответа 3

1

Вы забыли подключить библиотеку jQuery, поэтому выпадала ошибка

let agree = () => {
  console.log('User pressed OK')
$('.newConfirm').hide();
};
let disagree = () => {
   console.log('User pressed cancel')
$('.newConfirm').hide();
};
let createConfirm = (text) => {
    $('.title').text(text);  
    $('.ok').on('click', () => {
    agree()
});
    $('.cancel').on('click', () => {
    disagree()
});
}



$('.backdrop').hide();
$('.newConfirm').hide();
$('.rules').on('click', () => {
$('.newConfirm').toggle();
createConfirm('Are you accept with rules?')
2
  • библиотека была подключена
    – bota
    12 авг 2020 в 12:44
  • Но я этого не увидел в примере 12 авг 2020 в 15:47
0

Посмотрите может так вы примерно хотели

$(() => {
$('.backdrop').hide();
$('.newConfirm').hide();
$('.rules').on('click', () => {
  $('.backdrop').show();
  $('.newConfirm').show();
  
  $('.title').text('Are you accept with rules?'); 
  $('.ok').on('click', () => {
    agree();
    $('.backdrop').hide();
    $('.newConfirm').hide();
  });
  $('.cancel').on('click', () => {
    disagree();
    $('.backdrop').hide();
    $('.newConfirm').hide();
  });
  
  
});
  let agree = () => console.log('User pressed OK');
  let disagree = () => console.log('User pressed cancel');

  let createConfirm = (text) => {
    $('.title').text(text);  
  }
});

https://jsfiddle.net/botagoz/z6myk8xa/2/

0
let showModal = () => {
    $('.backdrop').show();
    $('.newConfirm').show();
  };
  let hideModal = () => {
    $('.backdrop').hide();
    $('.newConfirm').hide();
  };

  hideModal();

  let agree = $('.ok').on('click', () => {
    console.log('User pressed OK');
    hideModal()
  });
  let disagree = $('.cancel').on('click', () => {
    console.log('User pressed cancel');
    hideModal()
  });

  let createConfirm = (text, callback1, callback2) => {
    showModal();
    $('.title').text(text);
  };
  
  $('.rules').on('click', () => {
    createConfirm('Are you accept with rules?', agree, disagree);
  });

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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