How to create a modal in fuse?

I have gone through the examples but could not find something like Modal View, ie, a view overlaps on the main view just like a side bar (using Edge Navigator).There is a bad solution available, which explains to create a modal panel and make it visible and collapse.Is there any better method to create a modal view?

Hey Anupriyashakya20, I was able to implement a modal by making an image (which was a button I designed in Sketch) my trigger, and then having my modal (A rectangle with a scrollable stackpanel and an exit or submit button) change [Visibility].

Here’s an example in code:

Here’s my Modal with an initial setting to [Collapsed] and the button to collapse it at the bottom of my modal (or whereever you want to put it:



And here’s my button (that’s an image) that causes the modal to become visible:


Hope that helped!

Jake Hare’s example is very awesome. But I think fuse should make some Dialog APIs. (Which works with iOS’s UIAlertController and Android’s AlertDialog.)

I’ve made a proof of concept here:

> **Bjørn-Olav Strand wrote:** > >

I’ve made a proof of concept here:

> am getting this error Unknown type \`ModalJS\` for member \`Modal\` in MainView. - C:\\Users\\Oluwasegun\\Documents\\Fuse\\Inventory\\MainView.ux(1:1):E

I get this error Uncaught require(): module not found: Modal > **Bjørn-Olav Strand wrote:** > >

I’ve made a proof of concept here:

Perhaps you should file an issue on the Github project page?


Excellent example here from fuse samples

Modal OK dialog:

	<!-- Dialog  -->
	<Panel ux:Name="dialog" Alignment="VerticalCenter" Margin="40" Padding="20,30,20,0" Opacity="0">
		<Rectangle Layer="Background" Fill="#fff" CornerRadius="20" Opacity=".8" />
			<Text Alignment="Center" FontSize="18" TextWrapping="Wrap" TextAlignment="Center" Value="{aboutString}" />
			<Button Text="{okString}" Margin="0,20,0,0" Padding="10,10,10,50" Clicked="{closeDialog}" HitTestMode="LocalBoundsAndChildren">
					<PlaySound File="assets/ding.wav" />
		<WhileFalse Value="{isDialogShowing}">
			<Move Y="13" RelativeTo="Size" Duration="0.6" Easing="BackIn" />
			<Scale Factor="0.8" Duration=".6" Easing="BackIn" />
		<DropShadow />
	<WhileTrue Value="{isDialogShowing}">
		<Change dialog.Opacity="1" Duration=".3" Easing="QuadraticInOut" />
		<Change mainPanelBlur.Radius="10" Duration=".3" Easing="QuadraticInOut" />
	<!--   -->

Then in js file:

var Observable = require("FuseJS/Observable");
var isDialogShowing = Observable(false);

function showDialog() {
	isDialogShowing.value = true;

function closeDialog() {
	isDialogShowing.value = false;

module.exports = {
	isDialogShowing: isDialogShowing,
	showDialog: showDialog,
	closeDialog: closeDialog

For show dialog:

<Image ux:Name="showInfo" Width="24" Height="24" StretchMode="UniformToFill" Margin="10" Clicked="{showDialog}">...

Thanks Jack, it worked like charm. I followed the example.

I had to set mainPanelBlur and replaced PlaySound since I don’t have it defined.

Thanks a million.