Collection of free custom modal window code examples: confirm dialog, error, succes, etc.

  1. CSS Modal Windows
  2. jQuery Modal Windows

Creator

  • Aditi Gupta

Programming language

  • HTML / CSS / JS

Information a code

Bootstrap 4 Push notification Modal

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Bootstrap version: 4.3.1

Creator

  • Kabir Bhatia

Programming language

  • HTML / CSS / JS

Information a code

Bootstrap 4 Subscribe to Our Newsletter Modal Form

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 4.3.1

Creator

  • Ask SNB

Programming language

  • HTML / CSS / JS

Information a code

Bootstrap 4 Success Modal with Emoji

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 4.3.1

Creator

  • Ask SNB

Programming language

  • HTML / CSS / JS

Information a code

Bootstrap 4 Best Offer Modal

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 4.3.1

Creator

  • BBBootstrap Team

Programming language

  • HTML / CSS / JS

Information a code

Bootstrap 4 Document Verification Modal

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 4.3.1

Creator

  • BBBootstrap Team

Programming language

  • HTML / CSS / JS

Information a code

Bootstrap 4 Select Charts Buttons with Modal

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 4.3.1

Creator

  • BBBootstrap Team

Programming language

  • HTML / CSS / JS

Information a code

Bootstrap 4 Share Content on Social Media Modal

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 4.3.1

Creator

  • BBBootstrap Team

Programming language

  • HTML / CSS / JS

Information a code

Bootstrap 4 Trial Extended Information Modal

Bootstrap 4 trial extended information modal with two buttons.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 4.3.1

Creator

  • BBBootstrap Team

Programming language

  • HTML / CSS / JS

Information a code

Bootstrap 4 Successfully Modal

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 4.3.1

Creator

  • Ask SNB

Programming language

  • HTML / CSS / JS

Information a code

Bootstrap 4 Information Modal with Close Button

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Bootstrap version: 4.3.1

Creator

  • Ask SNB

Programming language

  • HTML / CSS / JS

Information a code

Bootstrap 4 Congratulation Modal Card

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Bootstrap version: 4.3.1

Creator

  • Whitney R

Programming language

  • HTML / CSS (Less) / JS

Information 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)

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 4.0.0

Creator

  • CreativeTim

Programming language

  • HTML / CSS / JS

Information a code

Bootstrap Modal

Bootstrap modals: classic, login and notice.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

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

Bootstrap version: 4.0.0

Creator

  • dipendra

Programming language

  • HTML / CSS / JS

Information a code

Checkbox Images Modal Bootstrap 4

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 4.0.0

Creator

  • Wisnu ST

Programming language

  • HTML / CSS / JS

Information a code

30+ Bootstrap Modal Animation Effects

30+ Bootstrap modal animation effects with Material Design style.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, velocity.js

Bootstrap version: 3.3.5

Creator

  • Tutorial Republic

Programming language

  • HTML / CSS / JS

Information a code

Bootstrap Simple Success Confirmation Popup

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Bootstrap version: 3.3.7

Creator

  • Tutorial Republic

Programming language

  • HTML / CSS / JS

Information a code

Bootstrap Elegant Success Modal

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Bootstrap version: 3.3.7

Creator

  • Tutorial Republic

Programming language

  • HTML / CSS / JS

Information a code

Bootstrap Elegant Error Modal

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Bootstrap version: 3.3.7

Creator

  • Tutorial Republic

Programming language

  • HTML / CSS / JS

Information a code

Bootstrap Delete Confirmation Modal

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Bootstrap version: 3.3.7

Creator

  • Adam Joiner

Programming language

  • HTML / CSS / JS

Information a code

Draggable Bootstrap Modal Window

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, jquery-ui.js

Bootstrap version: 3.3.7

Creator

  • Shahen Algoo

Programming language

  • HTML / CSS / JS

Information a code

BootStrap Modal as Left/Right Sidebar

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Bootstrap version: 3.3.5

Creator

  • Josh Winn

Programming language

  • HTML / CSS / JS

Information a code

Opening YouTube Download Dynamically in a Bootstrap Modal Window

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Bootstrap version: 3.3.4

Creator

  • Joe Watkins

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Autofocus Bootstrap Modal Close Button

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 3.2.0

Creator

  • Nathan Cooper

Programming language

  • HTML / CSS / JS

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: animate.css, jquery.js

Bootstrap version: 3.2.0

Creator

  • bseth99

Programming language

  • HTML / CSS / JS

Information a code

Bootstrap Modal Progress Bar

Create a modal progress bar with Twitter Bootstrap 3.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 3.0.0