Ensuring the modal is stored in one central location (Bootstrap)

Question

Ensuring the modal is stored in one central location (Bootstrap)

I'm currently working on a website project using bootstrap, and I need to incorporate the same modal across all pages. Right now, I find myself duplicating the entire code in each HTML file to make it accessible on every page. However, this method is not very efficient. Can anyone provide suggestions on how to avoid copying the same HTML code to multiple files? I am seeking a solution where the HTML code can be centralized in one place but still be accessible on all pages.

<!-- navbar for website -->
1 line of HTML code
<!-- sign-in and login modal (buttons on navbar) -->
2 lines of HTML code
<!-- main body content -->
3 lines of HTML code
4 lines of HTML code
5 lines of HTML code
<!-- footer for website -->
6 lines of HTML code
7 lines of HTML code

For instance, as shown in the above block, elements such as the navbar, modal, and footer (lines 1, 2, 6, 7) are consistent across all pages. Is there a way to store this common code elsewhere and simply link it similar to how CSS files are linked? Feel free to ask for more details in the comments, excluding my specific code.

html css modal-dialog

Answer 1

Answer №1

Here are a couple of methods to achieve your objective:

Employing Javascript

<script>
function loadModal() {
  var z, i, elmnt, file, xhttp;
  /*iterate through all HTML elements:*/
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*locate elements with a specific attribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /*perform an HTTP request utilizing the attribute value as the filename:*/
      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 the function again:*/
          elmnt.removeAttribute("w3-include-html");
          loadModal();
        }
      } 
      xhttp.open("GET", file, true);
      xhttp.send();
      /*exit the function:*/
      return;
    }
  }
}
</script>

Then execute it

<script>
   loadModal();
</script>

Utilizing HTML

<div w3-include-html="modal.html"></div>

Answer 2

Here are a couple of methods to achieve your objective:

Employing Javascript

<script>
function loadModal() {
  var z, i, elmnt, file, xhttp;
  /*iterate through all HTML elements:*/
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*locate elements with a specific attribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /*perform an HTTP request utilizing the attribute value as the filename:*/
      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 the function again:*/
          elmnt.removeAttribute("w3-include-html");
          loadModal();
        }
      } 
      xhttp.open("GET", file, true);
      xhttp.send();
      /*exit the function:*/
      return;
    }
  }
}
</script>

Then execute it

<script>
   loadModal();
</script>

Utilizing HTML

<div w3-include-html="modal.html"></div>

Answer 3

Answer №2

To start, it's important to segment your HTML code by creating separate files for components like footer (e.g. Footer.html) and header (e.g. header.html).

Next, leverage JQuery to incorporate these segmented parts.

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

For more information on the jQuery .load() method, visit the documentation here

Answer 4

To start, it's important to segment your HTML code by creating separate files for components like footer (e.g. Footer.html) and header (e.g. header.html).

Next, leverage JQuery to incorporate these segmented parts.

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

For more information on the jQuery .load() method, visit the documentation here

Ensuring the modal is stored in one central location (Bootstrap)

Answer №1

Answer №2

Similar questions

Toggle the visibility of a modal in code across various components in an Angular 4 project using Typescript

Using Styled Components to achieve full width for input tag in relation to its parent

What would be more efficient: inputting all items in a form at once or adding them one by one consecutively

Using Node.js to retrieve table data from a URL

Decoding a Json list with angularJS

Employ a for loop to generate custom shapes within the canvas

Centered Alignment for Bootstrap Carousel Captions

What is the best way to manage photos from your phone without having to upload them online?

Add a decorative frame around the heading and text block

What is the method to turn off readonly property for input fields in Laravel?

Creating a custom Chrome extension with the ability to modify the pop-up window instead of the web page

Transforming a dynamic HTML layout into a non-responsive one: "RESPONSIVE NO MORE"

Cross-platform streaming video player that supports avi and asf files and can be easily embedded into any website

Can JavaScript be used to continuously monitor a window variable object in real-time?

Finding the best way to transfer text between DIV elements?

Attempting to transfer a string variable into a JavaScript scope within an HTML document using handlebars-express

Internet Explorer 9 is not fully extending the width of the box for multiple select options

Setting the column width and border-top in Highcharts

When using multiple select tags with *ngFor in Angular, modifying the value of the first select tag will have an

Convert an HTML table into an Excel file using PHP