Stopbyte

How to use Bootstrap Modal in an efficient way without using too many HTML lines?

Web Development JQuery
,
#1

Hi There!

In this article we want to explain how to use bootstrap modal without using large amount of HTML tags in the page body, in order to save page size. This method will help you to reach better performance in Google Page Insight because it permits to decrease the number of bytes that you need to send to the end user browser.

If you know Page Insight Tool, you must know the above-the-fold metric, that is hard to respect when the page is too much complex. When google check a page, it requires that the most of the content must be visible ASAP! If your page is too complex or use too many resources, browser can needs too many time to render all the content, google can bevome angry :japanese_ogre: and your page score can become poor.

Bootstrap modal requires a large amount of tag in order to work. And if you need more than modal per page this amount of bytes increase drammatically. Then, we need to use a simple trick in order to avoid this issues.

##Background
Bootstrap Modal allow web developer to emulate a Dialog window that is a component that lock other components on the screen taking the focus of applications. This kind of components is needed wherever you need to ask for critical informations to the user or when you need to avoid user input during a long task: The most simple example is the waiting info!

We can divide the modals in two great categories: static dialog and non static dialog: the main difference between them is that the static dialog do not allow to close it by clicking the background.

Bootstrap provides the modal component that implements this two dialog categories. Both is accesible with bootstrap facilitation attribute (data-*) or directly via javascript.

Open modal with bootstrap data-* attributes

The first way to use modal is the following. The most important attribute in the following example is data-target, data-toggle and data-dismiss.

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

How data-* attribute work

Bootstrap provides a rich service function that can simplify thd development of webapp. If this case the Bootstrap JS engine will handles the data attributes like the following scheme:

  1. When user click the first button the data-toggle attribute inform bootstrap to add the modal features to the element that have the same id that is written jn the data-target attribute. This will be activated the modal on page.
  2. When the user click on the close button, the data-dismiss inform bootstrap to terminate current instance of modal

Please note that modal should be displayed one at time so Bootstrap do not need data-target when developer request to closing dialog.

Open modal with JS

At least all Bootstrap functions rely on jQuery, then if we want to open a dialog directly by code the only things to do is to call $("#myModal").modal (). :astonished:

If we want to close a modal we just use the same modal function passing the ‘hide’ parameters.

$("#myModal").modal ('hide')

That is! :point_up:

Modal is awesome but…

Try to think a project in which you need too many modals! If we follow the previous approach we need to put in the html code too many similar structure, changing only the strings for the message showed.
This can penalize our page performance due to the large amounts of data to send!

We can follow a smart approach that can help us to save many and many bytes!
The following function will able us to create all the modal that we need by reusing the same tag many and many times.

I use a simple layout: A status bar with close button, a title, a body (you can pass complex html in it) and a close button. Of course, you are free to use all the layout that you want!

function createModal(errTitle,errMsg) 
		{
                    // first, check if this is the first call to function
			var oldError = document.getElementById("myModal"); 
			if (oldError==null)
			$("body").append('<div class="modal" arial-labelledby="" id="myModal" role="dialog"></div>'); // create space for modal
                    // set modal title and content
			$("#myModal).html('<div class="modal-dialog"><div class="modal-header bg-primary"><button type="button" class="close" data-dismiss="modal">&times;</button><h4 class="modal-title">'+errTitle+'</h4></div><div class="modal-body bg-warning"><p>'+errMsg+'</p></div></div>');
			$("#myModal").modal(); // show the modal

		}

Imagine now how many bytes you saved! Also, consider the environment in which the dialog data is stored in server side and is passed to page only when the last one needed it! You saved bytes and made a step to the most recent technologies (like node.js). :checkered_flag: