Can I make a Modal without Bootstrap?

Question

I have been tasked with creating a modal, but I was told that the Bootstrap library will not be available to me in this build. Is it possible to build a modal without Bootstrap classes? If so, can someone guide me to some documentation?

This is what I have so far:

<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel"><i class="fa fa-envelope"></i> </h4>
            </div><!-- modal-header -->
            <div class="modal-body">
                <p>Select the options below to get the right coverage type for you.</p>
                <form class="form-inline" role="form">
                    <div>

                    </div>
                </form>
            </div><!-- modal-body -->
        </div><!-- modal-content -->
    </div><!-- modal-dialog -->
</div><!-- modal -->

My next step was to put in there:

<div class="form-group"></div>

but that is a Bootstrap class, what is the alternative?

Bakehouse

Answer 1

Is it possible to build a modal without Bootstrap classes?

A modal is an overlay that prevents the user to interact with some parent content. It is not proprietary of Boostrap, although Bootstrap makes it very easy to implement one by adding css classes. Underneath, Bootstrap uses JQuery to implement most of its functionality, including the modals.

You can implement it by using any other library for example Bulma , by using another framework that uses jquery, for example jqueryui, by using any other javascript library that could implement a modal, or by implementing it using javascript, or even with only css and html.

This is a simple tutorial on how to create a modal using javascript and css.

This is a tutorial on how to create a modal without javascript, only html5 and css.

These tutorials are very useful if you don't want your code to be dependant of any third-party library, like jquery.

If you don't want to (or can't) use bootstrap, but you can use jquery, you can follow this tutorial.

Invaluable

It should be noted that neither of the roll-your-own tutorials above are feature complete. They're missing critical things esc to close, capturing focus, key accessibility features (role, aria attributes), and disabling document scroll. A more robust example (although still not perfect) can be found here: w3.org/WAI/ARIA/apg/example-index/dialog-modal/dialog – Bezoar

It's unfortunate that building a reasonable dialog is a fairly involved process. If you can use a library, that's often the best bet. But keep an eye on the HTML Dialog Element - browser support is improving. Otherwise, be prepared to spent a good chunk of time getting it right – Bezoar

Answer 2

There's this Jquery plugin, take a look: https://jqueryui.com/dialog

Shivery

Answer 3

Html part

 <div class="demo-description">
   This page demonstrates a modal dialog without any third-party libraries. It uses only CSS + plain (vanilla) javascript.

   <ul>
      <li><a class="modal-toggle" data-target="openModal1">Open Modal window 1</a></li>
      <li><a class="modal-toggle" data-target="openModal2">Open Modal window 2</a></li>

      <li><button class="modal-toggle" data-target="openModal1">Open Modal window 1</button></li>
   </ul>
</div>

<div id="openModal1" class="modal-wrapper">
   <div class="modal">
      <a href="#close" title="Close" class="close">X</a>
      <div class="modal-header">
         <h2>Modal Box 1</h2>
      </div>
      <div class="modal-content">
         <p>Some text for selection</p>
      </div>
   </div>
</div>

<div id="openModal2" class="modal-wrapper">
   <div class="modal">
      <a href="#close" title="Close" class="close">X</a>
      <div class="modal-header">
         <h2>Modal Box 2</h2>
      </div>
      <div class="modal-content">
         <p>Some text for selection</p>
      </div>
   </div>
</div>

CSS PART

    body {
   font-family: sans-serif;
   padding: 30px;
}
.demo-description {
   max-width: 460px;
   margin: 0 auto;
   line-height: 1.5;
}

.modal-toggle {
   cursor: pointer;
   color: #268bd2;
}
.modal-wrapper {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;

   background: rgba(0, 0, 0, 0.8);
   z-index: -1;
   opacity: 0;

   -webkit-transition: opacity 0.2s ease-in;
   -moz-transition: opacity 0.2s ease-in;
   transition: opacity 0.2s ease-in;

   pointer-events: auto;
}

.modal-wrapper > div {
   width: 460px;
   height: 40%;
   position: absolute;

   top: 0;
   bottom: 0;
   left: 0;
   right: 0;

   margin: auto;

   vertical-align: middle;
   padding: 20px;
   border-radius: 6px;
   background: #fff;
   z-index: 1;
}

.close {
   background: #606061;
   color: #ffffff;
   line-height: 25px;
   position: absolute;
   right: -12px;
   text-align: center;
   top: -10px;
   width: 24px;
   text-decoration: none;
   font-weight: bold;
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   border-radius: 12px;
}

.close:hover {
   background: #00d9ff;
}

JAVASCRIPT

var cb = document.querySelectorAll(".close");
for (i = 0; i < cb.length; i++) {
   cb[i].addEventListener("click", function() {
      var dia = this.parentNode.parentNode; /* You need to update this part if you change level of close button */
      dia.style.opacity = 0;
      dia.style.zIndex = -1;
   });
}

var mt = document.querySelectorAll(".modal-toggle");
for (i = 0; i < mt.length; i++) {
   mt[i].addEventListener("click", function() {
      var targetId = this.getAttribute("data-target");
      var target = document.getElementById(targetId);
      target.style.opacity = 1;
      target.style.zIndex = 9999;
   });
}

Splayfoot

While their content may be valid, code-only answers get poor reception on SO. Please see How to Answer for good tips, then please elaborate on how you complement this accepted answer https://mcmap.net/q/1403209/-can-i-make-a-modal-without-bootstrap – Agglutinin