Блог

Я столкнулся с проблемой с моим кодом. Я хочу создать модальную форму подписки. Я добавил форму подписки в свой HTML-документ, но когда я запускаю код в браузере, я не вижу там части подписки, в чем проблема? Пожалуйста, помогите

Вот моя ссылка на код:

https://github.com/Nourin-020/Coming_soon

На первый взгляд кажется, что вы забыли подключить <button> модальную форму.

 <button class="btn" id="subscribe-modal-open">Subscribe</button>
 

Вероятно, требуются некоторые data- аргументы. Я подозреваю, что что-то подобное должно делать:

 <button class="btn" id="subscribe-modal-open" data-bs-toggle="modal" data-bs-target="#subscribe-modal">Subscribe</button>
 

Далее вы захотите удалить весь этот раздел из своего style.css . Почти каждая строка в этом блоке является проблемой (the z-index , the width , the top / left , the background ; ни одна из них не работает так, как вы, вероятно, хотели, в сочетании с загрузочным модальным материалом)

 #subscribe-modal{
    text-align: center;;
    width:100%;
    color:#fff;
    background:red;
    top: 0;
    left: 0;
    z-index: 1000; 
}
 

И, наконец, вы нарушили кучу вещей в диалоговом окне начальной загрузки html, с которого вы начали (вероятно, при попытке диагностировать вашу проблему). Несколько тегов отсутствовали, и вы использовали некоторые class имена начальной загрузки как id . Я бы предложил просто обновить бит между вашими <!-- Subscribe Model --> комментариями с помощью:

   <!-- Subscribe Model -->
    <div id="subscribe-modal" class="modal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h2 class="modal-title">Subscribe Our Channel</h2>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            <form>
              <input type="email" name="email" id="">
              <input type="submit" value="Submit now">
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
  <!-- Subscribe Model -->
 

Я клонировал ваш github и протестировал его, и это устраняет проблемы.