Блог

Я понимаю, что в stackoverflow есть похожие вопросы, однако они либо кажутся устаревшими (bootstrap3), либо не работают для меня. Если возможно, я хочу просто придерживаться html, css и javascript. Я бы предпочел не использовать jquery или php.

Я сохраню свой код очень общим. У меня есть мой главный экран, на котором есть кнопка, мне нужна эта кнопка для вызова модала с ModalPage. ModalPage содержит только этот модальный файл без какого-либо другого кода. Я использую flask-python в качестве своего бэкэнда.

Главный экран

 <button type="button" class="btn btn-primary btn-lg">This should call modal/button>
  

ModalPage

 <div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">amp;times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
  

Я пробовал использовать url_for и отображать его с помощью <a> , но, похоже, это не работает

Возможно, вам придется сохранить весь модальный HTML-код в переменной в вашем коде Python Flask. Одним из способов (из довольно большого числа способов) было бы прочитать текст и сохранить html в переменной, используя:

 modaltext=[]
with open('ModalPage.html', 'r') as f:
    content = f.read()
    modaltext.append(content)
  

Поместите приведенный выше код в свой views.py желательно. Это имя файла зависит от того, где вы сохранили ModalPage.html . Здесь я предположил, что он находится в той же папке, что и views.py (что может быть не так. Это может быть в шаблонах, но я не знаю вашу структуру папок).

И измените свой return render оператор, чтобы он также возвращал modaltext список.

Затем вызовите его на своей главной странице HTML, используя синтаксис jinja2 везде, где это необходимо. Обычно это может быть похоже:

 <div>{{ modal }}</div>
  

Честно говоря, я не уверен насчет части python / flask, но я делаю то, что вы пытаетесь, используя только html / js. Вы могли бы добавить идентификатор к кнопке, то есть ‘modal-form-button’. Затем создайте прослушиватель событий в JS для элемента с этим идентификатором, на который нажимается.

 document.getElementById("test-btn").addEventListener("click", showModal);
  

Функция ShowModal() может содержать необходимый код для переключения отображения модала между ‘display:bloack’ и ‘display:none’