Кнопка закрытия диалогового окна Metro UI не работает

Я начал создавать небольшой веб-сайт с Metro UI, чтобы воспитывать себя.Кнопка закрытия диалогового окна 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&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>

источник

2016-10-05 M.Koch

Пожалуйста, сделайте скрипку своей проблемы. – maverickosama92

Что вы имеете в виду при создании скрипки или моей проблемы? –

Я изменил код с момента моего последнего раза, но он все равно почти такой же. Я нашел свою проблему с пробной версией и ошибкой и помогал с моим CO. Мне пришлось сделать div из моего диалога вне div с моей плитки большой, но внутри панели приложений.

<!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-06 09:29:59

Кнопка закрытия диалогового окна Metro UI не работает

ответ

Смежные вопросы