Ответы пользователя по тегу HTML
  • Как выводить определенное модальное окно?

    Starina_js
    @Starina_js
    full-stack web dev
    Теория.
    Получаете ответ от обработчика форм / бека - считываете ответ. Если успех -> вызываете функцию открытия формы с успехом, если ошибка -> форма с ошибкой (по id или data attr нужной формы).
    А еще это форма то может быть одна, просто вы в форму можете вставлять свои сообщения.
    Если форму пишите с нуля, то вам нужно сделать html разметку, css стили.
    Функция вызова формы - можно просто добавлять нужные классы для открытия формы.

    А если используете какой-то css фреймворк, допустим bootstrap, то там есть функции вызова формы и вообще сама форма готовая.

    Далее простой пример
    <!-- Модальное окно успешного результата -->
    <div id="modal-success" class="modal">
      <div class="modal-content">
        <span class="close">&times;</span>
        <h2>Успех!</h2>
        <p>Данные успешно отправлены.</p>
      </div>
    </div>
    
    <!-- Модальное окно с ошибкой -->
    <div id="modal-error" class="modal">
      <div class="modal-content">
        <span class="close">&times;</span>
        <h2>Ошибка!</h2>
        <p>Произошла ошибка при отправке данных.</p>
      </div>
    </div>


    // При успешной отправке данных
    const showSuccessModal = () => {
        document.getElementById("modal-success").style.display = "block";
    };
    
    // При ошибке отправки данных
    const showErrorModal = () => {
        document.getElementById("modal-error").style.display = "block";
    };
    
    // Закрытие модального окна при клике на крестик
    const closeButtons = document.getElementsByClassName("close");
    for (let i = 0; i < closeButtons.length; i++) {
        closeButtons[i].addEventListener("click", function() {
            const modal = this.parentElement.parentElement;
            modal.style.display = "none";
        });
    }
    
    //пример обработки ответа с формы
    
    const form = document.querySelector('form');
    
    form.addEventListener('submit', async (event) => {
      event.preventDefault();
    
      const formData = new FormData(form);
      const response = await fetch('/api/submit-form', {
        method: 'POST',
        body: formData
      });
    
      if (response.ok) {
        const result = await response.json();
        // обработка успешного ответа
        console.log(result);
      } else {
        const error = await response.text();
        // обработка ошибки
        console.error(error);
      }
    });


    // а это пример с promise .then 
    const form = document.getElementById("myForm");
    form.addEventListener("submit", function(event) {
      event.preventDefault(); // Предотвращаем отправку формы по умолчанию
      
      // Получаем данные из формы
    const formData = new FormData(form);
      
      // Отправляем данные на сервер с помощью Fetch API
      fetch("URL_СЕРВЕРА", {
        method: "POST",
        body: formData
      })
      .then(function(response) {
        if (response.ok) {
          showSuccessModal(); // Показываем модальное окно успешного результата
        } else {
          showErrorModal(); // Показываем модальное окно с ошибкой
        }
      })
      .catch(function(error) {
        console.error("Ошибка:", error);
        showErrorModal(); // Показываем модальное окно с ошибкой
      });
    });


    .modal {
      display: none; /* Скрываем модальное окно по умолчанию */
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.5);
    }
    
    .modal-content {
      background-color: #fefefe;
      margin: 15% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
    }
    
    .close {
      float: right;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
    }
    
    .close:hover,
    .close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
    }
    Ответ написан
    1 комментарий
  • Как убрать воспроизведение нескольких аудио в html?

    Starina_js
    @Starina_js
    full-stack web dev
    Как-то так?
    Когда запускаем одно аудио, мы отключаем остальные, кроме текущего

    <audio id="audio1" src="music.mp3"></audio>
    <audio id="audio2" src="music2.mp3"></audio>

    const audioElements = Array.from(document.getElementsByTagName('audio'));
    
      const stopOtherAudio = (currentAudio) => {
        audioElements.forEach((audio) => {
          if (audio !== currentAudio) {
            audio.pause();
            audio.currentTime = 0;
          }
        });
      };
    
      audioElements.forEach((audio) => {
        audio.addEventListener('play', () => stopOtherAudio(audio));
      });
    Ответ написан
    1 комментарий
  • Как сверстать блок с частью скрытого изображения?

    Starina_js
    @Starina_js
    full-stack web dev
    Не пробовал с видео, но с картинками точно работает .

    Допустим так
    clip-path: polygon(53% 0, 100% 0, 100% 49%, 100% 100%, 53% 100%, 52% 49%, 0 49%, 0 0);


    потыкать тут
    63b48f9c7a7e4557279691.png
    Ответ написан
    5 комментариев
  • Как реализовать закрытие при клике на фон и заблокировать скролл?

    Starina_js
    @Starina_js
    full-stack web dev
    Ух.. Код немного избыточен.
    Как я понял, у вас есть кнопка, которая открывает меню. Необходимо по клику открывать меню, блокировать скролл документа, плюс чтобы темнел фон. А при клике вне объекта меню - закрывалось меню, исчезал фон, скролл появлялся.

    1. Как заблокировать скролл? Вешать на body - overflow: hidden при клике на кнопку.
    2. Закрытие при клике вне меню. (загуглил, автор https://misha.agency/javascript/klik-vne-elementa.html)
    jQuery(function($){
    	$(document).mouseup( function(e){ // событие клика по веб-документу
    		var div = $( "#popup" ); // тут указываем ID элемента
    		if ( !div.is(e.target) // если клик был не по нашему блоку
    		    && div.has(e.target).length === 0 ) { // и не по его дочерним элементам
    			div.hide(); // скрываем его
    		}
    	});
    });
    Ответ написан
  • Поможете исправить несколько багов в верстке?

    Starina_js
    @Starina_js
    full-stack web dev
    У вас сетка (grid) не спроектирована. Посмотрите пример сетки на flexbox , допустим у того же bootstrap getbootstrap.com
    Адаптивная сетка создается на media-запросах https://developer.mozilla.org/ru/docs/Web/CSS/@media

    Пока не будет ограничений по сетке, все будет "плавать"
    Ответ написан
    Комментировать
  • Как изменить стили bootstarp 5?

    Starina_js
    @Starina_js
    full-stack web dev
    1. Посмотрите порядок подключения стилей.
    2. Движки/CMS могут по-своему переключать порядок
    3. Посмотрите в инспекторе , где идет сбивка стилей. Что перебивает.
    Ответ написан
    Комментировать