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 대화 상자 닫기 버튼이 작동하지 않습니다.

답변

관련 문제