Вёрстка формы обратной связи и подключение скриптов

Опубликовано автором

Текущие дела 22.01.23

Делаю, сделал сверстал форму попап для сайта инвест.
далее её нужно прикрепить к кнопке на этом сайте атрибутом
data-target=”modal”
дальше пока не делал. Буду учить урок и делать!
Сверстал эту форму с нуля , вроде ничего сложного.
Вначале задаём весь модал, тёмное окно див класс модал
.modal и нажимаем tab
затем создаём див для контента, .modal-content
прописываем заголовок формы и текст под заголовком

Затем прописываем тэг форм и ниже инпуты*2
ниже button тип submit класс btn
под кнопкой прописываем согласие на обработку персональных данных в теге p или small

Вот и всё затем стилизуем, ещё пропишем крестик через див и символ икс X или &times
что также будет крестик, стилями изменим его размеры и вид, пропишем для него cursor: pointe___________________________________________________________________
Весь код стилей пишу прямо на индексном файле под формой меду тегами  style
чтобы всё было в одном ффайле, потом можно привязать и разнести по папкам.
Пропишем для модал свойство дисплей ноне – disply:none
и окно не будет видно, затем через стили css или через скрипт можно
прописать появление окна на сайте, Артём Исламов решил писать
скриптами , задав кнопке атрибут data-target=”modal”
________________________
Далее изучу завтра…
Продолжение следует…..
Для появления попап применяем скрипт

/*$(‘[data-target=»modal»]’).on(‘click’, function(event) {

event.preventDefault();

$(‘.modal’).show();

/* действуйте в соответствии с событием*/

});

Для кнопки с атрибутом data-target=”modal” мы прописываем функцию .on(click),
после которой показ окна show

$(‘.modal’).show();

Также по клику на закрывающий крестик прописываем скрытие окна

$(‘.close’).on(‘click’, function(event) {  event.preventDefault();  $(‘.modal’).hide();  Оформляем всё в общей функции $(document).ready(function()
$(document).ready(function() {   $(‘[data-target=»modal»]’).on(‘click’, function(event) {  event.preventDefault();  $(‘.modal’).show();  /* действуйте в соответствии с событием*/});    $(‘.close’).on(‘click’, function(event) {  event.preventDefault();  $(‘.modal’).hide();  /* действуйте в соответствии с событием*/});   });
запаковываем в файл main.js и подключаем через скрипт к индексному файлу.

<script src=»main.js»></script>
­­­­­­­­­­­­_____________________________________________

В итоге всё связке со скриптами из папки
которую я расположил на яндекс диске и вы можете взять её по ссылке ниже https://disk.yandex.ru/d/NZmgsCbKnM85Aw
Содержимое папки подключаем на индексном файле
<script src=»feedback/vendors/jquery/jquery-3.3.1.min.js»></script><script src=»feedback/vendors/bootstrap/js/bootstrap.min.js»></script><script src=»feedback/js/main.js»></script>

а также стили
<link rel=»stylesheet» href=»feedback/css/main.css»>

___________

в итоге мы получаем свою собственную форму , которая
открывается и закрывается с помощью скриптов
Вот пример её работы у меня на хостинге
https://isvinzov.ru/Forma26/
____________________________________________
Это только материал для работы , а улучшать и изменять можно
до бесконечности. Главное у вас есть материал для работы ,
где можно тренировать и развивать свои способности
программировать на html, css, js.

Желаю удачи дорогие друзья.
Главное чтобы было не скучно и интересно!
С вами был на связи Иван С.
Пишите , звоните, буду рад пообщаться!
_______________________
Вот моя визитка!
https://isvinzov.ru/vizitka/