0

自分自身を教育するために、Metro UI を使用して小さな Web サイトを作成し始めました。

マウスでホバーしたときにちょっとした情報を表示する画像を作りたかったのですが、それを押すとすぐにダイアログがポップアップします。

しかし、どういうわけか、閉じるボタンは何もしません。

閉じるボタンは何のアクションも実行しません。ダイアログ自体またはタイルをクリックすると、ダイアログが再び閉じますが、[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&uuml;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>
4

1 に答える 1

1

前回からコードを少し変更しましたが、ほとんど同じです。試行錯誤で問題を発見し、CO を支援しました。ダイアログの div を、タイルの大きな div の外側に作成する必要がありましたが、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&uuml;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>
于 2016-10-06T09:29:59.983 に答える