How to create a modal in fuse?

How-to Discussions
1

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?

2

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:

file

file

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

file

Hope that helped!

3

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

4

I’ve made a proof of concept here: https://github.com/bolav/fuse-modalview

5

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

I’ve made a proof of concept here: https://github.com/bolav/fuse-modalview

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

6

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

I’ve made a proof of concept here: https://github.com/bolav/fuse-modalview

7

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

8

thanks

9

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" />
		<StackPanel>
			<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">
				<Clicked>
					<PlaySound File="assets/ding.wav" />
				</Clicked>
			</Button>
		</StackPanel>
		<WhileFalse Value="{isDialogShowing}">
			<Move Y="13" RelativeTo="Size" Duration="0.6" Easing="BackIn" />
			<Scale Factor="0.8" Duration=".6" Easing="BackIn" />
		</WhileFalse>
		<DropShadow />
	</Panel>
	<WhileTrue Value="{isDialogShowing}">
		<Change dialog.Opacity="1" Duration=".3" Easing="QuadraticInOut" />
		<Change mainPanelBlur.Radius="10" Duration=".3" Easing="QuadraticInOut" />
	</WhileTrue>
	<!--   -->

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}">...
10

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.