Collection of free custom modal window code examples: confirm dialog, error, succes, etc. Update of June 2020 collection. 16 new items.

Related Articles

  1. CSS Modal Windows
  2. jQuery Modal Windows
Demo image: Bootstrap Modal V14

Author

  • rokr

Made with

  • HTML / CSS / JS

About a code

Bootstrap Modal V14

If you would like to offer your users a special deal (before they leave), this free coupon form pop-up is here to make it happen for you. It features an image, title, additional text and the form with a CTA.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: icomoon.css, jquery.js, popper.js

Bootstrap version: 4.3.1

Demo image: Bootstrap Modal V18

Author

  • rokr

Made with

  • HTML / CSS / JS

About a code

Bootstrap Modal V18

If you would like to promote an exclusive item, offer, app, you name it, this free offer with CTA modal will do the trick. It features a modern and catchy design that will instantly trigger everyone’s curiosity.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: icomoon.css, jquery.js, popper.js

Bootstrap version: 4.3.1

Demo image: Bootstrap Modal V19

Author

  • rokr

Made with

  • HTML / CSS / JS

About a code

Bootstrap Modal V19

Sharing item photos and customer feedback happens quickly with this free split-screen review modal. Instead of working on the pop-up from the ground up, save time and energy with this convenient widget.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: icomoon.css, jquery.js, popper.js

Bootstrap version: 4.3.1

Demo image: Bootstrap Modal V20

Author

  • rokr

Made with

  • HTML / CSS / JS

About a code

Bootstrap Modal V20

If you have sensitive content on your website, give users access to it with this free password-protected content modal. It is easy to use, so both beginners and experts can quickly embed it into their apps.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, popper.js

Bootstrap version: 4.3.1

Demo image: Bootstrap Modal V08

Author

  • rokr

Made with

  • HTML / CSS / JS

About a code

Bootstrap Modal V08

Use this neat, modern and attention-grabbing free confirmation modal template for newsletter subscriptions and account creations. The layout is 100% mobile-ready, working across all screen sizes flawlessly.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: ionicons.css, jquery.js, popper.js

Bootstrap version: 4.3.1

Demo image: Bootstrap Modal V04

Author

  • rokr

Made with

  • HTML / CSS / JS

About a code

Bootstrap Modal V04

A modern and free coupon modal window template that you can apply to your online store or marketplace. The tool is fully flexible, working on all modern devices and screen sizes flawlessly.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: ionicons.css, flaticon.css, jquery.js, popper.js

Bootstrap version: 4.3.1

Demo image: Bootstrap Modal V03

Author

  • rokr

Made with

  • HTML / CSS / JS

About a code

Bootstrap Modal V03

Create an attention-grabbing sale notification with this free sale modal window template. It features a split-screen design, for text, image and CTA. Use it strategically and boost sales through the roof.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: ionicons.css, flaticon.css, jquery.js, popper.js

Bootstrap version: 4.3.1

Author

  • Alpesh Baraiya

Made with

  • HTML / CSS / JS

About a code

Bootstrap Modal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 3.3.7

Author

  • GoSnippets

Made with

  • HTML / CSS / JS

About a code

Bootstrap Animated Modal Popup

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: animate.css, jquery.js, popper.js

Bootstrap version: 4.0.0

Demo image: Bootstrap 5 Track Order Details with Modal

Author

  • BBBootstrap Team

Made with

  • HTML / CSS / JS

About a code

Bootstrap 5 Track Order Details with Modal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 5.0.0

Demo image: Bootstrap 5 Simple Notification Modal Card

Author

  • BBBootstrap Team

Made with

  • HTML / CSS / JS

About a code

Bootstrap 5 Simple Notification Modal Card

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 5.0.0

Demo image: Bootstrap 5 Premium Discount Popup/Modal

Author

  • BBBootstrap Team

Made with

  • HTML / CSS / JS

About a code

Bootstrap 5 Premium Discount Popup/Modal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 5.0.0

Demo image: Bootstrap 4 Modal

Author

  • Alex Gill

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Modal

An example of the .modal component. Click the button above to open the modal.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, popper.js

Bootstrap version: 4.5.2

Demo image: Bootstrap 5 Doctors Appointment Information Modal

Author

  • BBBootstrap Team

Made with

  • HTML / CSS / JS

About a code

Bootstrap 5 Doctors Appointment Information Modal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 5.0.0

Author

  • Aditi Gupta

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Push notification Modal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Bootstrap version: 4.3.1

Author

  • Kabir Bhatia

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Subscribe to Our Newsletter Modal Form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 4.3.1

Author

  • Ask SNB

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Success Modal with Emoji

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 4.3.1

Author

  • Ask SNB

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Best Offer Modal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 4.3.1

Author

  • BBBootstrap Team

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Document Verification Modal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 4.3.1

Author

  • BBBootstrap Team

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Select Charts Buttons with Modal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 4.3.1

Author

  • BBBootstrap Team

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Share Content on Social Media Modal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 4.3.1

Author

  • BBBootstrap Team

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Trial Extended Information Modal

Bootstrap 4 trial extended information modal with two buttons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 4.3.1

Author

  • BBBootstrap Team

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Successfully Modal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 4.3.1

Author

  • Ask SNB

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Information Modal with Close Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Bootstrap version: 4.3.1

Author

  • Ask SNB

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Congratulation Modal Card

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Bootstrap version: 4.3.1

Demo image: Modal

Author

  • Script47

About a code

Modal

Modal - a Bootstrap 4.0+ jQuery plugin for the modal component.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 4.3.1

Demo image: Bootstrap Modal Wizrad

Author

  • RouteKick

About a code

Bootstrap Modal Wizrad

A Bootstrap plugin to create modal with multi-steps (wizard).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 4.3.1

Author

  • Whitney R

Made with

  • HTML / CSS (Less) / JS

About a code

Simple Bootstrap Modal Spinner/Loader

A simple and lightweight option to display a loading animation inside a centered modal. Useful for posting via Ajax and hiding upon data return. Bootstrap modal loader/spinner made with simple LESS, HTML & jQuery (Bootstrap 3.6)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 4.0.0

Author

  • CreativeTim

Made with

  • HTML / CSS / JS

About a code

Bootstrap Modal

Bootstrap modals: classic, login and notice.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap-material-design.css, font-awesome.css, jquery.js

Bootstrap version: 4.0.0

Author

  • dipendra

Made with

  • HTML / CSS / JS

About a code

Checkbox Images Modal Bootstrap 4

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 4.0.0

Author

  • Wisnu ST

Made with

  • HTML / CSS / JS

About a code

30+ Bootstrap Modal Animation Effects

30+ Bootstrap modal animation effects with Material Design style.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, velocity.js

Bootstrap version: 3.3.5

Author

  • Tutorial Republic

Made with

  • HTML / CSS / JS

About a code

Bootstrap Simple Success Confirmation Popup

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Bootstrap version: 3.3.7

Author

  • Tutorial Republic

Made with

  • HTML / CSS / JS

About a code

Bootstrap Elegant Success Modal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Bootstrap version: 3.3.7

Author

  • Tutorial Republic

Made with

  • HTML / CSS / JS

About a code

Bootstrap Elegant Error Modal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Bootstrap version: 3.3.7

Author

  • Tutorial Republic

Made with

  • HTML / CSS / JS

About a code

Bootstrap Delete Confirmation Modal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Bootstrap version: 3.3.7

Author

  • Adam Joiner

Made with

  • HTML / CSS / JS

About a code

Draggable Bootstrap Modal Window

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, jquery-ui.js

Bootstrap version: 3.3.7

Author

  • Shahen Algoo

Made with

  • HTML / CSS / JS

About a code

BootStrap Modal as Left/Right Sidebar

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Bootstrap version: 3.3.5

Author

  • Josh Winn

Made with

  • HTML / CSS / JS

About a code

Opening YouTube Links Dynamically in a Bootstrap Modal Window

Example for "Opening YouTube Links Dynamically in a Bootstrap Modal Window". Links to YouTube videos are opened automatically as an embedded video in a single modal window. No need for extra HTML or embed codes.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Bootstrap version: 3.3.4

Author

  • Joe Watkins

Made with

  • HTML / CSS (SCSS) / JS

About a code

Autofocus Bootstrap Modal Close Button

When the Bootstrap 3.0 modal is fired auto-focus the close button for better accessibility.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 3.2.0

Author

  • Nathan Cooper

Made with

  • HTML / CSS / JS

About a code

Fullscreen Bootstrap Modal

A fullscreen modal using Bootstrap. The modal features fixed header, content, and footer sections. The idea is to use this on small mobile devices to avoid competing with scrolling on the body.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: animate.css, jquery.js

Bootstrap version: 3.2.0

Author

  • bseth99

Made with

  • HTML / CSS / JS

About a code

Bootstrap Modal Progress Bar

Create a modal progress bar with Twitter Bootstrap 3.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 3.0.0