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?

Solution 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.

Solution 2

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