Search

How to Create a Modal Window with a Custom Scrollbar

Listen to this article
fancybox-modal-with-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.

[space]

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

[space]

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' );
fancyBox-with-scrollbar-explained
The Final Outcome

[space]

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.

Aruna Vadlamani

Aruna Vadlamani

5 Responses

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

WordPress Development

Custom WordPress Solutions, for You

LearnDash Development

Custom LearnDash Solutions, for You

WooCommerce Development

Custom WooCommerce Solutions, for You

WordPress Plugins

Scale your WordPress Business

WooCommerce Plugins

Scale your WooCommerce Business

LearnDash Plugins

Scale your LearnDash Business

Label

Title

Subtext

Label

Title

Subtext

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads

    WordPress Tips & Tricks
    Ketan Vyawahare

    How to Make Responsive Tables using CSS without Tag Read More »