Launch Bootstrap 4 Modal From WordPress Menu

By Arun Basil Lal — on November 30, 2017 — 5 Comments ↓

Add .launch-contact-modal class to your WordPress menu item. This can be done from the admin interface Appearance > Menu.

Change #contactModal in the following jQuery to the ID of your Bootstrap 4 modal.

jQuery(document).ready(function($){
  // Adding Bootstrap Modal to WordPress Menu
  $('.launch-contact-modal').find('a').attr('data-toggle', 'modal');
  $('.launch-contact-modal').find('a').attr('data-target', '#contactModal');
});

Hello, I am Arun Basil Lal. Thank you for reading!

I am a WordPress product developer and creator of Image Attributes Pro. I am passionate about solving problems and travelling the world.

Divi is a WordPress theme that web designers do not want you to know. It comes with a drag-and-drop theme builder. You can build beautiful looking unique websites without touching a line of code. Just choose from one of the many pre-made layouts, or pick elements and arrange them any way you like.

Divi is every WordPress developer's wet dream. Surprise your clients with neat responsive websites and have fun building them.

Divi comes from Elegant Themes. If you enjoy building websites, you *need* an Elegant Themes membership. 87 beautiful themes and 5 plugins for the cost of less than a candy-bar each!

Divi Live Demo

Note: I am an avid user of Divi myself and this is a honest review. I wouldn't recommend something that I do not personally find amazing.

5 Comments.

Ritesh Sirvastava says:

December 2, 2017 at 14:06

Nice Post Sir It helps a lot to learn more.

Reply
- Arun Basil Lal says:
  
  December 2, 2017 at 15:09
  
  Thanks for the feedback Ritesh, glad it helped 🙂
  
  Reply
Jeff says:

January 29, 2019 at 02:03

Worked Perfect Thanks!

Reply
Yvette says:

November 8, 2019 at 00:17

This helped me so much, super straightforward! Thank you!!

Reply
Vanja says:

October 6, 2020 at 23:14

Thank you so much! God bless you!

Reply