Open Modal Popup from Top Navigation

You may face a certain requirement where you would want a popup to open instead of opening a new tab, or redirecting within the same tab when a user clicks on the Top navigation. This post will show you how to open modal popup from Top Navigation in SharePoint Online

For this you can simply override the click event of the Top Navigation and execute your code


Where “.new-window” was a specific class that was available against a top navigation. (You may need to check in your site what that would be based on the navigation setup)

Below is the Modal Popup code:

So in this modal popup logic the only thing unique i have done is autoSize the popup based on the screen resolution.

Pretty handy isn’t it.


This code will be need to be added in your master page, so you can reference a script file or add the code directly.

You need to load sp.js in case it is not loaded

Reference Link :


Leave a Reply

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