How to Create a Modal Window with a Custom Scrollbar

fancyBox Modal with a Custom Scrollbar

As a web developer, I have different kinds of requirements thrown my way. Well, thrown is a harsh word. So let’s say assigned 😀 . My user interface developer half, can provide the client, anything he needs. But sometimes, my user experience designer half disagrees. And in the battle of developer v/s designer, the client always wins!

Now, I would be against having a modal, (that too with a scrollbar). But you see, some clients tend to like that. Hence, I had to provide one. Nevertheless, you’re not here for my life story. So let’s get to the point.

Create the Modal Window

To create the popup window I used the jQuery fancyBox (there are several available, so if you want to use the exact same one I used, follow the specified link). The fancyBox, is a responsive lightbox, which you can add to any WordPress theme. If your theme inherently provides you a popup, you might not need the fancyBox. Unless, you wanted to replace the existing one for some reason. In that case, you only need to replace the class of the popup with the ‘fancybox’ class.

For example, if you have the following:

<a class='theme-popup' href='#content'>Quick View</a>

You will have to replace “theme-popup”, with “fancybox”. Thus, your code should look like:

<a class='fancybox' href='#wdm_content'>Quick View</a>

This will be used to display the fancyBox using jQuery. So, if you have the above code in place, you need to move on to your JavaScript file, and add the following code:

jQuery(document).ready(function() {
jQuery(".fancybox").fancybox();
});

This code displays the fancyBox when ‘Quick View’ is clicked. The content to be displayed needs to be placed inside a ‘div’ with the id ‘wdm_content’.

Add a Custom Scrollbar

The next step is to add a custom scrollbar. We will be using jQuery, specifically the mCustomScrollbar jQuery library, to add the scrollbar on to the window. The library replaces the default scrollbar for any container. There isn’t any PHP code needed here, you only need to add the below given JS code.

(function(){
      jQuery(window).load(function(){
      jQuery(".wdm_content").mCustomScrollbar();
      });
})(jQuery);

The aCustomScrollbar has several themes which you can use, to style it according to your WordPress theme.

But wait. You will need to add a few more (important) lines of code to see any changes. You need to enqueue the needed Javascript and CSS files for the fancyBox and mCustomScrollbar, and of course the JS file which contains your code. So, add the following in functions.php of your theme or in your custom plugin.

function wdm_enqueue_styles_and_scripts() {
// fancyBox
wp_enqueue_style('wdm_fancybox_css',get_stylesheet_directory().'/css/jquery.fancybox.css');
wp_enqueue_script( 'wdm_fancybox_script',get_stylesheet_directory().'/js/jquery.fancybox.pack.js', array('jquery') );
// Custom Scrollbar
wp_enqueue_script( 'wdm_custom_scroll',get_stylesheet_directory().'/js/jquery.mCustomScrollbar.concat.min.js', array('jquery'));
wp_enqueue_style('wdm_custom_scroll_css',get_stylesheet_directory().'/css/jquery.mCustomScrollbar.css');
// your custom JS code
wp_enqueue_script( 'wdm_custom_js',get_stylesheet_directory().'/js/wdm_custom.js', array('jquery'));
}
add_action( 'wp_enqueue_scripts', 'wdm_enqueue_styles_and_scripts' );

The Final Outcome

Done! You should have an elegant looking lightbox with a sleek scrollbar. You can use this custom scrollbar for any container on your page. Do let me know if you try this out, and share images of the pop-ups you create. If you have any doubts or questions, you can leave them in the comments section, and I will be sure to help you out.

• WordPress Tips & Tricks
• With tags: Custom Scrollbar, fancyBox, jQuery, Theme Customization, Theme Development

Share:

• Aruna V

Please note, some of the links in this blog post might be affiliate links. This means if you go on to purchase a product using such a link, we receive a small commission (at no additional cost to you). This helps us support the blog and produce free content. We only recommend products we work with or love. Thank you for your support!