Metro UI 对话框关闭按钮不起作用
Metro UI Dialog close button doesn't work
我开始用 Metro UI 做一个小网站来教育自己。
我想制作一张图片,当我用鼠标悬停在它上面时,它会显示一些信息,当我按下它时,会弹出一个对话框。
但不知何故,关闭按钮没有任何作用。
关闭按钮不执行任何操作。单击对话框本身或磁贴会再次关闭对话框,但单击 X 不会执行任何操作。
我希望关闭按钮能够实现他的目的并在我点击它时关闭对话框。
这是我的代码希望你能帮助我。
<!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>
自上次以来,我对代码进行了一些更改,但仍然几乎相同。我在反复试验中发现了我的问题,并帮助我的 CO。我不得不从我的 div 之外的对话框中制作 div 从我的 tile-big 但在应用程序栏内。
<!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>
我开始用 Metro UI 做一个小网站来教育自己。
我想制作一张图片,当我用鼠标悬停在它上面时,它会显示一些信息,当我按下它时,会弹出一个对话框。
但不知何故,关闭按钮没有任何作用。
关闭按钮不执行任何操作。单击对话框本身或磁贴会再次关闭对话框,但单击 X 不会执行任何操作。
我希望关闭按钮能够实现他的目的并在我点击它时关闭对话框。
这是我的代码希望你能帮助我。
<!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>
自上次以来,我对代码进行了一些更改,但仍然几乎相同。我在反复试验中发现了我的问题,并帮助我的 CO。我不得不从我的 div 之外的对话框中制作 div 从我的 tile-big 但在应用程序栏内。
<!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>