I started to make a little website with Metro UI to educate myself.
I wanted to make a picture that show's a little information when I hover over it with the mouse and as soon as I press it a dialog pops up.
But somehow the close button isn't doin anything.
The close button doesn't perform any action. Clicking on the dialog itself or on the tile closes the dialog again but clicking on the X does nothing.
I want the close button to fullfill his purpose and close the dialog if I click on it.
Here is my code I hope you can help me.
<!DOCTYPE html>
<html lang="de">
<html>
<head>
<link href="build/css/metro.css" rel="stylesheet">
<link href="build/css/metro-icons.css" rel="stylesheet">
<script src="build/js/jquery.js" > </script>
<script src="build/js/metro.js" > </script>
<meta charset="utf-8"/>
</head>
<body bgcolor="#4da6ff">
<div class="app-bar">
<span class="app-bar-divider"> </span>
<ul class="app-bar-menu">
<li> <a href="index.html">Startseite</a> </li>
<li> <a href="" class="dropdown-toggle">Unterkünfte</a>
<ul class="d-menu" data-role="dropdown">
<li> <a href="Austatttung.html">Die Austattung</a> </li>
<li> <a href="Service.html">Unser Service</a> </li>
<li> <a href="Preise.html">Preise</a> </li>
</ul>
</li>
<li> <a href="" class="dropdown-toggle">Bildergalerie</a>
<ul class="d-menu" data-role="dropdown">
<li>
<a href="Wohnungen.html">
<span class="mif-file-picture"> Ferienwohnungen
</span>
</a>
</li>
<li>
<a href="Brandenburg.html">
<span class="mif-file-picture"> Brandenburg a.d.H
</span>
</a>
</li>
</ul>
</li>
<li> <a href="Reservierung.html">Reservierungsanfrage</a></li>
<li> <a href="Anfahrt.html">Anfahrt</a>
<span class="mif-automobile mif-1x"> </span>
</li>
<li> <a href="Kontakt.html">Kontakt</a></li>
<li> <a href="Impressum.html">Impressum</a><li>
</ul>
</div>
<div class="tile-big">
<div class="tile-content" onclick="toggleMetroDialog('#dialog')">
<div class="image-container">
<div class="frame" >
<img src="bilder/fox.jpg">
<div data-role="dialog" id="dialog" class="padding20" data-close-button="true">
<h1>Ahihahihahi Ahihahihahi Ahihahihahi!</h1>
</div>
</div>
<div class="image-overlay">
<b>What does the fox say ?</b>
</div>
</div>
</div>
</div>
<div class="tile-big">
<div class="tile-content">
<img src="bilder/badhbruecke.jpg" data-role="fit-image" data-format="accurate">
</div>
</div>
<script>
function showDialog(id)
{
var dialog = $(id).data('dialog');
if (!dialog.element.data('opened'))
{
dialog.open();
}
else
{
dialog.close();
}
}
</script>
</body>
</html>
I've changed the code since my last time a bit but it is still nearly the same. I found my problem with trial and error and help with my CO. I had to make the div from my dialog outside the div from my tile-big but inside the app-bar.
<!DOCTYPE html>
<html lang="de">
<html>
<head>
<link href="build/css/metro.css" rel="stylesheet">
<link href="build/css/metro-icons.css" rel="stylesheet">
<script src="build/js/jquery.js" > </script>
<script src="build/js/metro.js" > </script>
<meta charset="utf-8"/>
</head>
<body bgcolor="#4da6ff">
<div class="app-bar">
<span class="app-bar-divider"> </span>
<ul class="app-bar-menu">
<li> <a href="index.html">Startseite</a> </li>
<li> <a href="" class="dropdown-toggle">Unterkünfte</a>
<ul class="d-menu" data-role="dropdown">
<li> <a href="#" class="dropdown-toggle">Wohnungen</a>
<ul class="d-menu" data-role="dropdown">
<li> <a href="Ausstattung.html">Die Austattung</a> </li>
<li> <a href="Bildergalerie.html">Bildergalerie</a> </li>
</ul>
</li>
<li> <a href="Service.html">Unser Service</a> </li>
<li> <a href="Preise.html">Preise</a> </li>
</ul>
</li>
<li> <a href="Umgebung.html">Die Umgebung</a></li>
<li> <a href="" class="dropdown-toggle">Sonstiges</a>
<ul class="d-menu" data-role="dropdown">
<li><a href="Reservierung.html">Reservierungsanfragen</a></li>
<li><a href="Anfahrt.html">Anfahrt</a></li>
<li><a href="Hausordnung.html">Hausordnung</a></li>
<li><a href="WLAN.html">W-LAN Nutzung</a></li>
</ul>
</li>
<li> <a href="Kontakt.html">Kontakt</a></li>
<li> <a href="Impressum.html">Impressum</a><li>
</ul>
</div>
<div class="tile-big" onclick="toggleMetroDialog('#dialog')">
<div class="tile-content">
<div class="image-container">
<div class="frame" >
<img src="bilder/fox.jpg">
</div>
<div class="image-overlay">
<b>What does the fox say ?</b>
</div>
</div>
</div>
</div>
<div class="tile-big">
<div class="tile-content">
<img src="bilder/badhbruecke.jpg" data-role="fit-image" data-format="accurate">
</div>
</div>
<div data-role="dialog" id="dialog" class="padding20" data-close-button="true">
<h1>Ahihahihahi Ahihahihahi Ahihahihahi!</h1>
</div>
<script>
function showDialog(id)
{
var dialog = $(id).data('dialog');
if (!dialog.element.data('opened'))
{
dialog.open();
}
else
{
dialog.close();
}
}
</script>
</body>
</html>