How to Create Modal Popups? / Bootstrap & jQuery & CSS

Modal popups are often used on the web. Some of which are uses of them involve making newsletter signups, demonstrating notifications/alerts, and controlling register and login forms.

You can use various ways to create the modal popups by using HTML, CSS, and JavaScript. Therefore, now you specifically learn step by step Bootstrap Modal Popup, jQuery Modal Popup, and CSS Modal Popup in a detailed way.

Then, I finally meet you a very simple&actionable way to create and implement the popups. However, you first should learn why these modal popups are used and why these are so important.

What is Modal Popup?

A modal popup or dialog box help to show the last-updated web page. The benefit of a modal popup is showing added information not loading the page again. It is important for the better user experience because it provides the users with viewing the relevant information into the popup box on a similar web page.

Modals remain sight till when they are triggered and they generally used to focus on the user on a single call to be active or to emphasize information such as signup forms and alert.

There’re many places that Modal Popups are involved

  • Inquiry/contact forms

  • Lead generation/signup forms

  • Login/registration forms

  • Search forms

  • Alerts/notifications

  • Help/tips

  • Displaying full-screen images & videos

You can create your popups around your aims. For example, Alpma permits the users to login on everywhere on site.


Although popups have a bad reputation about the usage of themselves, as you use correctly them, you can benefit them so as to:

  • increase your website usability.
  • decrease the load times.
  • clarify all designs.

After learning why modal popups are so important, no we can learn how to create modal popups.

Bootstrap Modal Popup

As you read above, modal popups help users so that they can take actions before moving somewhere. It can be sometimes alerted users or take information.

Bootstrap modal plugin helps you to create very useful and functional modal popups or dialog boxes. You can check the example is below to understand how you can create your own modal with a header, footer and message body.

<pre class="tCont active hljs javascript"><div id=<span class="hljs-string">"myModal"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"modal fade"</span>>
    <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-dialog"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-content"</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-header"</span>></span>
                <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close"</span> <span class="hljs-attr">data-dismiss</span>=<span class="hljs-string">"modal"</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>×<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
                <span class="hljs-tag"><<span class="hljs-name">h4</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-title"</span>></span>Confirmation<span class="hljs-tag"></<span class="hljs-name">h4</span>></span>
            <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-body"</span>></span>
                <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Do you want to save changes you made to document before closing?<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
                <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-warning"</span>></span><span class="hljs-tag"><<span class="hljs-name">small</span>></span>If you don't save, your changes will be lost.<span class="hljs-tag"></<span class="hljs-name">small</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span>
            <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-footer"</span>></span>
                <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-default"</span> <span class="hljs-attr">data-dismiss</span>=<span class="hljs-string">"modal"</span>></span>Close<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
                <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>></span>Save changes<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
            <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
        <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
<<span class="hljs-regexp">/div></span>

When the “document object model” is load through JavaScript, the window will be automatically opened like:

Image of Bootstrap modal popup.

jQuery Modal Popup

jQuery modal dialog boxes are an excellent way to demonstrate information in a quick way. If you make the right preparation while creating jQuery modal dialog boxes, you can alert your users, show errors with the cool websites. (Because of the contemporary modal!)

Let’s look at the jQuery example!

<script ></script>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>

<button>Click me</button>

After this, you can see like it:

jQuery modal popup example.

CSS Modal Popup

CSS is a language that describes how the HTML elements are to be displayed on screen. Therefore, we firstly look at HTML then examine the CSS.

<div class="container">
  <div class="interior">
    <a class="btn" href="#open-modal"><i class="fas fa-external-link-alt"></i> Basic CSS-Only Modal</a>
<div id="open-modal" class="modal-window">
    <a href="#" title="Close" class="modal-close">Close</a>
    <div>A CSS-only modal based on the :target pseudo-class. Hope you find it helpful.</div>

Then, add CSS!

.modal-window {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.25);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  &:target {
    opacity: 1;
    pointer-events: auto;
  &>div {
    width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2em;
    background: #ffffff;
    color: #333333;
  header {
    font-weight: bold;
  h1 {
    font-size: 150%;
    margin: 0 0 15px;
    color: #333333;

.modal-close {
  color: #aaa;
  line-height: 50px;
  font-size: 80%;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 70px;
  text-decoration: none;
  &:hover {
    color: #000;

/* Demo Styles */

body {
  height: 100%;

body {
  font: 600 18px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  background-color: #f69d75;
  color: #555555

a {
  color: inherit;

.container {
  display: grid;
  justify-content: center;
  align-items: center;
  height: 100vh;

.btn {
  background-color: #fff;
  padding: 1em 1.5em;
  border-radius: 3px;
  text-decoration: none;
  i {
    padding-right: 0.3em;

It looks like:

Example of CSS modal popup.

What Do We Recommend? Popupsmart: A Simple Popup Creator Service

Undoubtedly, you can make your modal popups which purpose you have and where ever apply on the web page. However, there’s more functional and simple way to create the modal popups. PopupSmart makes everything on behalf on you. For the first step you should your goals why you need a popup, it can be increasing sales conversion, growing email list, guiding your audiences or increasing phone calls. After that, by choosing your aims you can move the next steps:

Popupsmart’s Design

There’re many ready templates so that you can choose one of them easily. If you want to guide your audience with “Announcement Popup”, you can select this:

Modal popup example from Popupsmart.

Or if you want to increase sale conversion with “Product Promotion Popup”, your popup seems like that:

Modal popup for promotion.

Popupsmart’s Display

You can customize your message briefly that based on the visitor’s behavior to increase conversion, engagement and sales rate. Also, Popupsmart enables its users to install popup in 1 minute and make it compatible with all website platforms.

Modal popup example for sales.

Popupsmart’s Integration System

After selecting your business goal and compatible popup templates, you customize and publish them with the Popupsmart’s user-friendly system without any technical issue.

Modal popup integration.

Popupsmart’s Analytics

Do you want to check your popups’ success? Of course, you do! After publishing your popups, you can measure the performance of your popups with clear metrics such as impressions, clicks, and conversions. It helps to make good strategies by using the different amount of data.

Track analytics example image.

There’re 3 features of analytics. These are:

- Real-time Stats

You can reach real-time data about click-through rates, demonstration and conversion metrics

- Google Analytics Event Tracking

Google Analytics Event integration allows you to follow your user’s behavior by analyzing impression, clicks, and conversion.

- Goal Tracking

See your effect of defined goals with the Google Analytics.

I hope this article guide you and make creating popups more easy with your own effort. You can try to make them with HTML, CSS, JavaScript. However, to not spend time, to prepare the most eye-catching popups and the most important to check your conversion, you should prefer Popupsmart!

To examine deeply Popupsmart’s designs, you should check this out:

Popup Design Templates

Furthermore, do you know how to create popup in Wordpress without plugin? Go to the related article to learn now!

Thank you for your time, guys! 🤗

Show Comments