Подлатать скрипт
<!doctype html> <html lang="ru"> <head> <meta charset="utf-8"> <title>index</title> <link rel="shortcut icon" href="izobrazhenie/favicon.ico"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="description" content="index"> <meta name="Keywords" content="index"> <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;900&display=swap" rel="stylesheet"> <link href="css/reset.css" rel="stylesheet"> <link rel="stylesheet" href="css/form.css" type="text/css"> <link rel="stylesheet" href="css/adaptiv.css" type="text/css"> <style> :root{ --osnovnoi_tsvet_form: #63CAF8; --dopolnitelnyi_tsvet_form: #4B99BD; --belyi_tsvet_form: #ffffff; --svetlo_seryi_tsvet_form: #EBECF0; --temno_seryi_tsvet_form: #2F3234; --chernyi_tsvet_form: #000000; --temno_chernyi_tsvet_form: #1A1A1A; } .forma_obratnoi_svyzi{ width: 280px; margin: 100px auto 0px; } .form{ font: 300 1rem/1.25rem 'Raleway', sans-serif; display: flex; flex-direction: column; width: 280px; margin: 0px 0px 20px 0px; } .tekst { font: 300 .8rem/1.25rem 'Raleway', sans-serif; resize: none; margin: 20px 0px 20px 0px; padding: 20px 20px 20px 20px; background-color: var(--svetlo_seryi_tsvet_form); border-radius: 0px; border: none; border: 0; outline: none !important; } .tekst:focus{ background-color: var(--belyi_tsvet_form); border-radius: 0px; border: none; border: 0; outline: none !important; } .kontakt { font: 300 .8rem/1.25rem 'Raleway', sans-serif; background-color: var(--svetlo_seryi_tsvet_form); border-radius: 0px; padding: 10px 0px 10px 10px; border: none; border: 0; outline: none !important } .kontakt:focus{ border-radius: 0px; border: none; border: 0; outline: none !important } .proverka { font: 300 1rem/1.25rem 'Raleway', sans-serif; } .proverka_podpis { font: 300 1rem/1.25rem 'Raleway', sans-serif; } .knopka { font: 300 1rem/1.25rem 'Raleway', sans-serif; border-radius: 0px; border: none; border: 0; outline: none !important; box-shadow: none; padding: 10px 10px 10px 10px; cursor: pointer; background-color: var(--osnovnoi_tsvet_form); color: var(--belyi_tsvet_form); } .checkbox { display: flex; align-items: center; font: 300 .8rem/1.25rem 'Raleway', sans-serif; margin: 20px 0px 20px 0px; } .checkbox input[type="checkbox"] { display: none; } .checkbox input[type="checkbox"]:checked~.custom-checkbox:after { background-color: var(--osnovnoi_tsvet_form); } .custom-checkbox { position: relative; display: block; width: 20px; height: 20px; margin: 0px 10px 0px 0px; border: 1px solid #000; /* font: 300 1rem/1.25rem 'Raleway', sans-serif; */ } .custom-checkbox:after { content: ''; position: absolute; top: 2px; right: 2px; left: 2px; bottom: 2px; transition: all linear 0.2s; /* font: 300 1rem/1.25rem 'Raleway', sans-serif; */ } .open_modal { font: 300 .8rem/1.25rem 'Raleway', sans-serif; } .open_modal p { font: 300 .8rem/1.25rem 'Raleway', sans-serif; background-color: var(--belyi_tsvet_form); border-radius: 0px; padding: 0px 0px 0px 0px; color: var(--chernyi_tsvet_form); font-size: 1rem; cursor: pointer; display: block; } .overlay { font: 300 .8rem/1.25rem 'Raleway', sans-serif; opacity: 0; visibility: hidden; z-index: 100; } .vsplyvaushae_okno { opacity: 0; visibility: hidden; background-color: var(--belyi_tsvet_form); font: 300 .8rem/1.25rem 'Raleway', sans-serif; z-index: 100; display: grid; grid-template-columns: auto; grid-template-rows: auto auto; grid-template-areas: "zakryt" "okno"; row-gap: 0px; column-gap: 0px; padding: 20px 20px 20px 20px; } .vsplyvaushae_okno .okno { font: 300 .8rem/1.25rem 'Raleway', sans-serif; padding: 0px 0px 0px 0px; } .vsplyvaushae_okno .close_modal { cursor: pointer; color: var(--chernyi_tsvet_form); text-align: center; } .vsplyvaushae_okno { font: 300 .8rem/1.25rem 'Raleway', sans-serif; color: var(--chernyi_tsvet_form); font-weight: normal; margin: 0px 0px 0px 0px; } .vsplyvaushae_okno p { font: 300 .8rem/1.25rem 'Raleway', sans-serif; line-height: 1rem; text-align: center; } .vsplyvaushae_okno hr { background-color: var(--belyi_tsvet_form); height: 1px; border: none; } .zakryt { grid-area: zakryt; text-align: right; } .okno { grid-area: okno; margin: 20px 0px 20px 0px; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <!-- <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> --> </head> <body> <div class="forma_obratnoi_svyzi"> <form class="form" action=""> <textarea class="tekst" required="" name="txtmessage" placeholder="Текст сообщения" rows="10"></textarea> <!-- <input type="email" placeholder="Email" name="txtemail"> --> <!-- <input type="tel" pattern="^((8|\+7)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{7,10}$" required="" placeholder="Телефон" name="txtphone"> --> <input class="kontakt" type="text" required="" placeholder="Напишите удобный для Вас способ связи" name="txtname"> <!-- <input class="proverka" type="checkbox"><label for="" class="proverka_podpis">Cогласие на обработку персональных данных</label> --> <label class="checkbox"> <input type="checkbox"/> <span class="custom-checkbox"></span> <span class="checkbox-text"><a href="#">Cогласие на обработку персональных данных</a></span> </label> <input type="hidden" name="valTrFal" class="valTrFal" value="valTrFal_disabled"> <input class="knopka" type="submit" value="Отправить" disabled="disabled" name="btnsend"> </form> <div class="vsplyvaushae_okno"> <div class="zakryt"> <img src="https://rakipov.ru/files/zakrit.svg" width="24" alt=""> </div> <div class="okno"> <p>Ваше сообщение доставлено</p> </div> </div> </div> <script> jQuery(document).ready(function($){ //в этой функции отслеживается изменение чекбокса "я не робот" $(document).on('change', '.form input:checkbox', function() { if($(this).is(':checked')){ $(".form input[type=submit]").removeAttr('disabled'); $('.form input[type=hidden].valTrFal').val('valTrFal_true'); } else { $(".form input[type=submit]").attr('disabled','disabled'); $('.form input[type=hidden].valTrFal').val('valTrFal_disabled'); } }); //закрытие модального окна $('.zakryt, .overlay').click(function (){ $('.vsplyvaushae_okno, .overlay').css({'opacity':'0', 'visibility':'hidden'}); $('.form textarea').val(''); //сброс всех полей формы обраной связи $(':input','.form').not(':button, :submit, :reset, :hidden').val('').removeAttr('checked').removeAttr('selected'); $(".form input[type=submit]").attr('disabled','disabled'); }); //проверяет какой ответ был получен //и в зависимости от ответа //выводит информацию о статусе //отправки письма $(".form").submit(function() { var str = $(this).serialize(); $.ajax({ type: "POST", url: "contact.php", data: str, success: function(msg) { if(msg == 'ok') { $('.vsplyvaushae_okno, .overlay').css('opacity','1'); $('.vsplyvaushae_okno, .overlay').css('visibility','visible'); $('.form textarea').val(''); } else { $('.vsplyvaushae_okno .okno').html('<p>Ошибка</p><p>Сообщение не отправлено, убедитесь в правильности заполнение полей</p>'); $('.vsplyvaushae_okno, .overlay').css('opacity','1'); $('.vsplyvaushae_okno, .overlay').css('visibility','visible'); } } }); return false; }); }); </script> </body> </html> Есть часть скрипта которая отвечает за не активность кнопки отправить Вот она $(document).on('change', '.form input:checkbox', function() { if($(this).is(':checked')){ $(".form input[type=submit]").removeAttr('disabled'); $('.form input[type=hidden].valTrFal').val('valTrFal_true'); } else { $(".form input[type=submit]").attr('disabled','disabled'); $('.form input[type=hidden].valTrFal').val('valTrFal_disabled'); } }); И она работает так что делает просто кнопку не кликабельной, а мне нужно что бы кнопка была не кликабельная и просто к ней приписывался стиль css который бы позволял мне менять цвет размер и прочее. |
И еще нужно что бы закрывалось сообщение об отправке только по классу
zakryt но это по возможности. Хотя вроде он так и работает, но я не уверен. |
Цитата:
|
Спасибо, не обратил внимание на атрибут, да и откровенно им ни когда не пользовался, впервые столкнулся.
|
Часовой пояс GMT +3, время: 22:38. |