Помогите перехватить стандартный confirm() и передать в кастомный блок
Необходимо отлавливать стандартные конфирмы и выводить их в кастомный блок. Скрипт стартует, но в блок выводится только сообщение. Кнопки подтверждения и отмены пропадают.
jQuery(document).ready(function($) {
window.realConfirm=window.confirm
window.confirm=function(c){
customConfirm(c)
}
confirm("Test!");
function customConfirm(c) {
if($('#customconfirm')[0]) {
if($('#customconfirm').hasClass('on')) {
$('#customconfirm').find('.alerttext').html(c);
}else{
$('#customconfirm').addClass('on').find('.alerttext').html(c);
}
}else{
$('body').append('<div id="customconfirm" class="on"><div id="customconfirm_cnt"><div id="ic_w_pp"><svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="1" y="1" width="58" height="58" rx="29" fill="#FF7875"/> <path d="M30 48C39.9249 48 48 39.9249 48 30C48 20.0751 39.9249 12 30 12C20.0751 12 12 20.0751 12 30C12 39.9249 20.0751 48 30 48ZM30 45.2308C21.5733 45.2308 14.7692 38.4267 14.7692 30C14.7692 21.5733 21.5733 14.7692 30 14.7692C38.4267 14.7692 45.2308 21.5733 45.2308 30C45.2308 38.4267 38.4267 45.2308 30 45.2308ZM31.3846 38.3077L31.3846 35.5385H28.6154L28.6154 38.3077H31.3846ZM31.3846 32.7692L31.3846 21.6923H28.6154L28.6154 32.7692H31.3846Z" fill="white"/> <rect x="1" y="1" width="58" height="58" rx="29" stroke="white" stroke-width="2"/> </svg></div><span class="alerttext">' + c + '</span></div></div>');
}
$('#customconfirm').fadeIn(250);
}
$(document).on('click', '#customconfirm', function(){
$(this).removeClass('on').fadeOut();
});
});
#customconfirm {
display: none;
overflow: hidden;
padding: 40px;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
font-size: 20px;
background-color: rgba(38, 38, 38, 0.75);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);}
#customconfirm_cnt {
max-width: 500px;
position: absolute;
padding: 40px;
background-color: #fff;
top: 40%;
left: 50%;
transform: translateX(-50%);
border-radius: 2px;}
#ic_w_pp{
width: 60px;
height: 60px;
position: absolute;
top: -30px;
left: -30px;}
.alerttext {
color: #262626;
font-size: 18px;
line-height: 26px;
font-weight: 400;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>