Создала модальное окно, которое должно вызываться при нажатии на кнопку и по нажатию на кнопки ок или 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>
item
вcallback1(item)
?item
не определена. Нигде в коде она не создается.