Two modals

I want to have two modals, and display them as needed.

I added one, all is well. When I add the second, nothing happens.

What am I doing wrong?


	<Panel ux:Name="otherModal" Alignment="VerticalCenter" Margin="20" Padding="20,10,20,0" Opacity="0">
		<Rectangle Layer="Background" Fill="#fff" CornerRadius="10" Opacity="1" />
		<StackPanel>
			<Text Alignment="Center" FontSize="18" TextWrapping="Wrap" TextAlignment="Center" Value="{TalkTitle}" />
			<Panel>
				<Text Alignment="Center" FontSize="14" TextWrapping="Wrap" TextAlignment="Left" Value="{TalkDesc}" />
				<Image Url="{TalkPhoto}" StretchMode="UniformToFill" MemoryPolicy="UnloadUnused"></Image>
				<DockPanel>
				    <Video ux:Name="video" Dock="Fill" File="Assets/small.mp4" IsLooping="true" StretchMode="UniformToFill" Height="1">
				        <ProgressAnimation>
				            <Change progressBar.Width="100" />
				        </ProgressAnimation>
				    </Video>
				    <Rectangle ux:Name="progressBar" Dock="Bottom" Fill="#f00" Width="0%" Height="10" />
				    <Grid Dock="Bottom" ColumnCount="2" RowCount="1">
				        <Button Text="Play">
				            <Clicked>
				                <Resume Target="video" />
				            </Clicked>
				        </Button>
				        <Button Text="Pause">
				            <Clicked>
				                <Pause Target="video" />
				            </Clicked>
				        </Button>
				    </Grid>
				</DockPanel>
				<Button Text="Close modal" Margin="0,20,0,0" Padding="10,10,10,50" Clicked="{closeDialog}" HitTestMode="LocalBoundsAndChildren">
				</Button>
			</Panel>
			<WhileTrue Value="{isDialogShowing}">
				<Change dialog.Opacity="1" Duration=".3" Easing="QuadraticInOut" />
			</WhileTrue>

		</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" />
	</WhileTrue>


	<Panel ux:Name="dialog" Alignment="VerticalCenter" Margin="20" Padding="20,10,20,0" Opacity="0">
		<Rectangle Layer="Background" Fill="#fff" CornerRadius="10" Opacity="1" />
		<StackPanel>
			<Text Alignment="Center" FontSize="18" TextWrapping="Wrap" TextAlignment="Center" Value="Download status" />
			<Panel>
				<Text Alignment="Center" FontSize="14" TextWrapping="Wrap" TextAlignment="Left" Value="Downloading...." />

				<Button Text="Close modal" Margin="0,20,0,0" Padding="10,10,10,50" Clicked="{closeDialog}" HitTestMode="LocalBoundsAndChildren">
				</Button>
			</Panel>
			<WhileTrue Value="{isDownloadShowing}">
				<Change dialog.Opacity="1" Duration=".3" Easing="QuadraticInOut" />
			</WhileTrue>

		</StackPanel>
		<WhileFalse Value="{isDownloadShowing}">
			<Move Y="13" RelativeTo="Size" Duration="0.6" Easing="BackIn" />
			<Scale Factor="0.8" Duration=".6" Easing="BackIn" />
		</WhileFalse>
		<DropShadow />
	</Panel>
	<WhileTrue Value="{isDownloadShowing}">
		<Change dialog.Opacity="1" Duration=".3" Easing="QuadraticInOut" />
	</WhileTrue>



	<ClientPanel>
		<Grid Columns="auto,1*,auto" Height="50" Dock="Top" Margin="5">
			<Grid ColumnCount="2" RowCount="2" Width="22" Height="22" Margin="10">
				<Each Count="4">
					<Circle Color="color4" Margin="1.5"/>
				</Each>
			</Grid>
			<Text ux:Name="titleText" Value="Dont be a tourist!" Color="color0" FontSize="25" Alignment="Center">
				<Font File="Assets/Fonts/Roboto-Black.ttf" />
			</Text>
			<Image File="Assets/search.png" Color="color4" Width="30" Height="30" Margin="10"/>
		</Grid>



		<Panel Dock="Top" Height="60" >
			<Rectangle ux:Name="indicator" CornerRadius="30" Color="color0" LayoutMaster="p1" Margin="0,10" Width="100%" ZOffset="0.1"/>
			<Grid ColumnCount="5" Margin="-30,0">
				<Panel ux:Name="p1" Column="0" ColumnSpan="2"/>
				<Panel ux:Name="p4" Column="3" ColumnSpan="2"/>
			</Grid>

			<Grid ZOffset="1" Margin="-20,0">
				<Column ux:Name="col1" Width="1" WidthMetric="Proportion"/>
				<Column ux:Name="col2" Width="1" WidthMetric="Proportion"/>
				<Column ux:Name="col3" Width="1" WidthMetric="Proportion"/>
				<Column ux:Name="col4" Width="1" WidthMetric="Proportion"/>

				<Text ux:Class="TabHeader" Color="White" Alignment="CenterLeft" Opacity="0" Margin="20,0,0,0" MinWidth="100"/>
				<Image ux:Class="TabIcon" Width="25" Height="25" />

				<Panel HitTestMode="LocalBounds">
					<Grid Columns="auto,1*" Margin="40,0" Alignment="Left">
						<TabIcon ux:Name="c1" File="Assets/basket.png" Color="color0"/>
						<TabHeader ux:Name="h1" Value="Tours" />
					</Grid>
					<Clicked>
						<Set nav.Active="page1" />
					</Clicked>
				</Panel>
				<Panel HitTestMode="LocalBounds">
					<Grid Columns="auto,1*" Margin="30,0" Alignment="Left">
						<TabIcon ux:Name="c2" File="Assets/accountbalance.png" Color="color1"/>
						<TabHeader ux:Name="h2" Value="Places"/>
					</Grid>
					<Clicked>
						<Set nav.Active="page2" />
					</Clicked>
				</Panel>
				<Panel HitTestMode="LocalBounds">
					<Grid Columns="auto,1*" Margin="30,0" Alignment="Left">
						<TabIcon ux:Name="c3" File="Assets/play.png" Color="color2"/>
						<TabHeader ux:Name="h3" Value="Info"/>

					</Grid>
					<Clicked>
						<Set nav.Active="page3" />
					</Clicked>
				</Panel>
				<Panel HitTestMode="LocalBounds">
					<Grid Columns="auto,1*" Margin="30,0" Alignment="Left">
						<TabIcon ux:Name="c4" File="Assets/person.png" Color="color3" />
						<TabHeader ux:Name="h4" Value="Friends"/>
					</Grid>
					<Clicked>
						<Set nav.Active="page4" />
					</Clicked>
				</Panel>
			</Grid>
		</Panel>
		<PageControl ux:Name="nav">
			<NavigationMotion GotoEasing="BackOut" />
			<Attractor ux:Name="indicatorColorAttractor" Target="indicator.Color" Value="color0" />
			<Rectangle ux:Name="bgColor" Layer="Background" Color="color0" Opacity="0.12"/>
			<Attractor ux:Name="bgColorAttractor" Target="bgColor.Color" Value="color0" />
			<Attractor ux:Name="titleTextAttractor" Target="titleText.Color" Value="color0" />

			<WhileTrue ux:Name="shrinkIndicatorWidth">
				<Change indicator.Width="90" Duration="0.25"/>
			</WhileTrue>

			<Image ux:Class="PagePlaceholder" Margin="8,10,8,0" StretchMode="UniformToFill" ContentAlignment="Top"/>

			<Page ux:Name="page1">

		        <ScrollView>
		            <Grid ColumnCount="1">
		                
	                    <Each Items="{tours}">
		                    <DockPanel Height="350" Margin="10,20">
		                        <Rectangle Layer="Background" CornerRadius="10" Fill="#fff"  />
		                        <Rectangle Height="200" Dock="Top" Margin="0,-10"  CornerRadius="10">
		                        	

									<WhileBusy>
										<Image ux:Name="lowQualityImage" Url="{lowQualityImage}" StretchMode="UniformToFill" MemoryPolicy="UnloadUnused">
											<Desaturate Amount="1" />
											<RemovingAnimation>
												<Change lowQualityImage.Opacity="0" Duration="0.35"/>
											</RemovingAnimation>
										</Image>
									</WhileBusy>
									
									<Image File="{LocalPhoto}" StretchMode="UniformToFill" MemoryPolicy="UnloadUnused" />

									<!-- <Image File="{LocalPhoto}" Height="230" Padding="30" StretchMode="Fill" /> -->


		                    	</Rectangle>
		                    		<Clicked Handler="{locClick}" />
								<Panel Margin="0,40" >
		                            <Text Value="{Title}" TextAlignment="Left" Alignment="Left"  Margin="10,0" Padding="10" Dock="Top" FontSize="22" />
		                            <Text Value="{Description}" Height="50" TextAlignment="Left" Alignment="Left" Margin="10,60" Dock="Top" TextWrapping="Wrap" />
		                        </Panel>
		                    </DockPanel>
							<Clicked>
								<Set nav.Active="page2" />
							</Clicked>
						</Each>

		            </Grid>
		        </ScrollView>


				<WhileActive Threshold="0.5">
					<Set shrinkIndicatorWidth.Value="false" />
					<Set indicatorColorAttractor.Value="color0" />
					<Set bgColorAttractor.Value="color0" />
					<Set titleTextAttractor.Value="color0" />
				</WhileActive>
				<ActivatingAnimation>
					<Change h1.Opacity="1" />
					<Change col1.Width="2" />
					<Change c1.Color="White" />
				</ActivatingAnimation>



			</Page>
			<Page ux:Name="page2">
				<StackPanel>
					<Panel Height="250">
				        <NativeViewHost>
				        	<Select Data="{mapLocation}">
				            <MapView Latitude="41.9964600" Longitude="21.4314100" Zoom="10" ShowMyLocation="True" >
				                <Each Items="{locations}">
				                	<Each Items="{Locations}">
				                		<MapMarker Latitude="{lat}" Longitude="{lon}" Label="{Title}"  Tapped="{onMarkerTapped}"/>
				                	</Each>
				                </Each>
				            </MapView>
				        </Select>
				        </NativeViewHost>

				</Panel>
				<Panel Height="30">
					<StackPanel>
						<Panel>
							<Button Text="Display Modal" Height="20"  Clicked="{openDialog}"></Button>
						</Panel>
					</StackPanel>
				</Panel>
				<Panel Height="400">
			        <ScrollView>
			            <Grid ColumnCount="1">
			            	

		                    <Each Items="{locations}">
			                    <DockPanel Height="350" Margin="10,20">
			                        <Rectangle Layer="Background" CornerRadius="10" Fill="#fff"  />
			                        <Rectangle Height="200" Dock="Top" Margin="0,-10"  CornerRadius="10">
			                        	

										<WhileBusy>
											<Image ux:Name="lowQualityImage" Url="{lowQualityImage}" StretchMode="UniformToFill" MemoryPolicy="UnloadUnused">
												<Desaturate Amount="1" />
												<RemovingAnimation>
													<Change lowQualityImage.Opacity="0" Duration="0.35"/>
												</RemovingAnimation>
											</Image>
										</WhileBusy>
										
										<Image File="{LocalPhoto}" StretchMode="UniformToFill" MemoryPolicy="UnloadUnused" />

										<!-- <Image File="{LocalPhoto}" Height="230" Padding="30" StretchMode="Fill" /> -->


			                    	</Rectangle>
			                    		<Clicked Handler="{locClick}" />
									<Panel Margin="0,40" >
			                            <Text Value="{Title}" TextAlignment="Left" Alignment="Left"  Margin="10,0" Padding="10" Dock="Top" FontSize="22" />
			                            <Text Value="{Description}" Height="50" TextAlignment="Left" Alignment="Left" Margin="10,60" Dock="Top" TextWrapping="Wrap" />
			                        </Panel>
			                    </DockPanel>
								<Clicked>
									<Set nav.Active="page2" />
								</Clicked>
							</Each>


			            </Grid>

			        </ScrollView>				

					<WhileActive Threshold="0.5">
						<Set shrinkIndicatorWidth.Value="true" />
						<Set indicatorColorAttractor.Value="color1" />
						<Set bgColorAttractor.Value="color1" />
						<Set titleTextAttractor.Value="color1" />
					</WhileActive>
					<ActivatingAnimation>
						<Change h2.Opacity="1" />
						<Change col2.Width="2" />
						<Change c2.Color="White" />
					</ActivatingAnimation>
				</Panel>
			</StackPanel>
			</Page>
			<Page ux:Name="page3">
				<PagePlaceholder File="Assets/screen3.png" />
				<WhileActive Threshold="0.5">
					<Set shrinkIndicatorWidth.Value="true" />
					<Set indicatorColorAttractor.Value="color2" />
					<Set bgColorAttractor.Value="color2" />
					<Set titleTextAttractor.Value="color2" />
				</WhileActive>
				<ActivatingAnimation>
					<Change h3.Opacity="1" />
					<Change col3.Width="2" />
					<Change c3.Color="White" />
				</ActivatingAnimation>
			</Page>
			<Page ux:Name="page4">
				<PagePlaceholder File="Assets/screen4.png" />
				<WhileActive Threshold="0.5">
					<Set shrinkIndicatorWidth.Value="false" />
					<Set indicatorColorAttractor.Value="color3" />
					<Set bgColorAttractor.Value="color3" />
					<Set titleTextAttractor.Value="color3" />
				</WhileActive>
				<ActivatingAnimation Scale="0.333">
					<Move Target="indicator" X="1" RelativeTo="PositionOffset" RelativeNode="p4"/>
				</ActivatingAnimation>
				<ActivatingAnimation>
					<Change h4.Opacity="1" />
					<Change col4.Width="2" />
					<Change c4.Color="White" />
				</ActivatingAnimation>
			</Page>
		</PageControl>
	</ClientPanel>
</App>

It’s hard to say exactly, since the code you posted can not be run. There’s far too many things taken out of context (missing fonts, images, color definitions etc.) to even try to fix it. You should make a complete, minimal, ready-to-run reproduction if you need help.

As a wild guess though, it seems that both of your dialogs are only showing and hiding one of them:

<Panel ux:Name="dialog" ...
...
<WhileTrue Value="{isDialogShowing}">
    <Change dialog.Opacity="1" Duration=".3" Easing="QuadraticInOut" />
</WhileTrue>

I think I had the modals have the same name, which is why it did not work. Changing the name worked.