How to open a modal window for a custom datatype in the Umbraco back office

Opening a modal window in the back office of Umbraco, is easy using the example code below, just bare in mind that the modal window isn't like a bootstrap modal window in the sense that bootstrap opens its modal windows in a relatively square box on top of the content. Umbraco instead opens its modal windows as a content area on the right hand side of your screen.

Example Code:

<a href="javascript:UmbClientMgr.openModalWindow('/App_Data/mycustomfolder/myfile.html', 'Modal Window Example Title', true, 500, 400,0,0,'', callbackFunction();" title="Modal window">Open my Modal window</a>

Example Output:

Example Umbraco Modal Window

Further reading:

Be aware that this will open a web address as if it were a proper modal window i.e. you could load http://www.google.co.uk/ into it and it would load just fine in the side bar. As such, any local file you open will need to be a complete .html file with all standard html tags as if it were a standalone page.

If you're looking to open it as a dialog window so that you can parse data to and from the page without having to declare all the html around it, you'll need to read up on the dialogService.

In case you're interested, I've written an article on opening dialog windows and how to parse data between them.


Published at

Tags: Umbraco,JavaScript

Luke Alderton

Comments

Naufil
Good one.
30/07/2018
Post a comment
Sit tight...
We're adding your comment.
Thank you.
Your comment has been added.
There's been a problem.
Please try again later.
Share with
Tags
Latest Comments
By Amit tiwari on How to add a Xamarin Forms Loading Screen/Overlay
3 Oct 2019, 10:29 AM
By Mahmoud Radwan on Xamarin Forms multiple instances of same app open
16 Sep 2019, 21:16 PM
By للل on JQuery Unobtrusive Validation for dynamically created elements
31 Aug 2019, 10:12 AM
By tiky on JQuery Unobtrusive Validation for dynamically created elements
16 Aug 2019, 13:10 PM
By Gerry on Replacing the Xamarin Header/Navigation bar with a custom view/template
11 Jul 2019, 17:12 PM
By steve choi on Xamarin Forms multiple instances of same app open
30 Jun 2019, 09:09 AM
By esrgr on JQuery Unobtrusive Validation for dynamically created elements
11 Jun 2019, 06:01 AM
By annualmars on Raspberry Pi - Running Java app on Raspbian
10 May 2019, 15:48 PM
Categories
App Development
Event
Game Development
Mapping
Modelling
Programming
Review
Robotics
Tutorial
Web Development