Хранение модальных только в одном месте (Bootstrap) - PullRequest
Новая
       7

Хранение модальных только в одном месте (Bootstrap)

0 голосов
/ 11 октября 2018

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

<!-- navbar for website -->
1 html code
<!-- sign in and login modal(buttons are on navbar) -->
2 html code
<!-- main body -->
3 html code
4 html code
5 html code
<!-- footer for website -->
6 html code
7 html code

Например, в соответствии с вышеупомянутым блоком navbar, модальный и нижний колонтитулы (1,2,6,7 строки) остаются прежнимиза каждую страницу.Как я могу поместить все это в другое место и просто связать это как-то, как css файлы связаны (что-то вроде этого).Я могу дать вам больше информации, просто спросите в комментариях (кроме моего точного кода).

Ответы [ 2 ]

0 голосов
/ 11 октября 2018

Есть два способа достижения вашей цели:

  1. Использование Javascript 
<script>
function includeModal() {
  var z, i, elmnt, file, xhttp;
  /*loop through a collection of all HTML elements:*/
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /*make an HTTP request using the attribute value as the file name:*/
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          /*remove the attribute, and call this function once more:*/
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      } 
      xhttp.open("GET", file, true);
      xhttp.send();
      /*exit the function:*/
      return;
    }
  }
}
</script>

Затем назовите его 

<script>
   includeModal();
</script>
Использование HTML 
<div w3-include-html="modal.html"></div>
0 голосов
/ 11 октября 2018

Сначала вам нужно разделить html, например, создать другой файл только для Footer, например, Footer.html, header.html и т. Д.

Затем используйте JQuery для их включения. 

<html> 
 <head> 
  <script src="jquery.js"></script> 
   <script> 
     $(function(){
      $("#includedContent").load("header.html"); 
      });
   </script> 
  </head> 
   <body> 
    <div id="includedContent"></div>
  </body> 
 </html>

Документация jQuery .load () здесь

...