Popupsmart
Published in

Popupsmart

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

You can create modal popups by using HTML, CSS, and JavaScript so learn bootstrap modal popup, jQuery modal popup, and CSS modal popup in detailed way.

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

Modal popups are often used on the web for initiating newsletter signups, demonstrating notifications/alerts, and controlling registration and login forms.

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

Then, I’ll finally give you a very simple&actionable way to create and implement popups. However, you should first learn why modal popups are used and why they are so important.

Table of contents:

What is Modal Popup?

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

Modals remain silent till when they are triggered and they’re 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 in:

  • 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 users to login everywhere on site.

Although popups have a bad reputation about their usage, when you use them correctly, you can benefit from them to:

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

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

Bootstrap Modal Popup

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

Bootstrap modal plugin helps you create very useful and functional modal popups or dialog boxes. You can check the example below to understand how you can create your own modal popup 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 loaded through JavaScript, the window will automatically open.

jQuery Modal Popup

jQuery modal dialog boxes are an excellent way to demonstrate information quickly. If you prepare properly while creating jQuery modal dialog boxes, you can alert your users or show errors with the cool websites. (Because of the contemporary modal!)

Let’s look at the jQuery example!

<script ></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</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 the following:

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>
</div>
<div id="open-modal" class="modal-window">
<div>
<a href="#" title="Close" class="modal-close">Close</a>
<h1>Hello!</h1>
<div>A CSS-only modal based on the :target pseudo-class. Hope you find it helpful.</div>
</div>
</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 */

html,
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 this:

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

Undoubtedly, you can make your modal popups for whichever purpose and wherever they apply on your web page. However, there’s a more functional and simple way to create modal popups. PopupSmart makes everything on your behalf. For the first step you should determine why you need a popup. It can be to increase sales conversion, grow an email list, guide your audiences or increase phone calls. After that, by choosing your aims you can move to the next steps:

Popupsmart’s Design

There are many ready templates from which you can choose. If you want to guide your audience with an “Announcement Popup”, you can select this:

Or if you want to increase sales conversion with a “Product Promotion Popup”, your popup can be designed as such:

Popupsmart’s Display

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

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.

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 you create effective strategies by using the different amount of data.

There are 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 Google Analytics.

I hope this article guides you on how to create popups easily. You can try to make them with HTML, CSS, or JavaScript. However, to not waste time, to prepare the most eye-catching popups and most importantly to check your conversions, you should pick Popupsmart!

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

Popup Design Templates

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

Thank you for your time! 🤗

Show Comments

--

--

--

The best digital marketing contents — expertly curated for you. #LeadGeneration #ConversionOptimization #DigitalMarketing #EmailMarketing 🤩

Recommended from Medium

HLS Video Streaming with Node.JS — A Tutorial

Featured Javascript Open Source Projects for bounty hunters.

React without npm, Babel, or webpack

Boost you autotests with fast authorization

How to craft a simple testing framework

Pacific Northwest National Laboratories researcher use a robot to prepare high throughput samples for a project

One thing you didn’t know about JSON.stringif

The Difference Between Library and Framework

Friday Frontend: Middle of Summer Edition

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Emre Elbeyoglu

Emre Elbeyoglu

CEO at popupsmart.com

More from Medium

Universal Links and Nuxt

Illustration of Chain

Insquad | Made with React JS

Insquad | Made with React JS

Fastify + Next.js with Typescript

Nextjs and Fastify logo

Font Awesome icons in React Js