Modaler Dialog

  • HTML

Es gibt 5 Antworten in diesem Thema. Der letzte Beitrag () ist von Rootbob91.

    Modaler Dialog

    Hey,

    ich habe mir mit diesem Beispielcode hier mal versucht n modalen Dialog zu basteln, allerdings wird dieser nicht mehr geschlossen.

    Was mache ich falsch?
    Spoiler anzeigen

    HTML-Quellcode

    1. <!DOCTYPE html>
    2. <head>
    3. <title>Creating a modal window with HTML5 &amp; CSS3</title>
    5. <style>
    6. .modalDialog {
    7. position: fixed;
    8. font-family: Arial, Helvetica, sans-serif;
    9. top: 0;
    10. right: 0;
    11. bottom: 0;
    12. left: 0;
    13. background: rgba(0,0,0,0.8);
    14. z-index: 99999;
    15. opacity:0;
    16. -webkit-transition: opacity 400ms ease-in;
    17. -moz-transition: opacity 400ms ease-in;
    18. transition: opacity 400ms ease-in;
    19. pointer-events: none;
    20. }
    22. .modalDialog:target {
    23. opacity:1;
    24. pointer-events: auto;
    25. }
    27. .modalDialog > div {
    28. width: 400px;
    29. position: relative;
    30. margin: 10% auto;
    31. padding: 5px 20px 13px 20px;
    32. border-radius: 10px;
    33. background: #fff;
    34. background: -moz-linear-gradient(#fff, #999);
    35. background: -webkit-linear-gradient(#fff, #999);
    36. background: -o-linear-gradient(#fff, #999);
    37. }
    39. .close {
    40. background: #606061;
    41. color: #FFFFFF;
    42. line-height: 25px;
    43. position: absolute;
    44. right: -12px;
    45. text-align: center;
    46. top: -10px;
    47. width: 24px;
    48. text-decoration: none;
    49. font-weight: bold;
    50. -webkit-border-radius: 12px;
    51. -moz-border-radius: 12px;
    52. border-radius: 12px;
    53. -moz-box-shadow: 1px 1px 3px #000;
    54. -webkit-box-shadow: 1px 1px 3px #000;
    55. box-shadow: 1px 1px 3px #000;
    56. }
    58. .close:hover { background: #00d9ff; }
    59. </style>
    60. </head>
    62. <body>
    64. <a href="#openModal">Open Modal</a>
    66. <div id="openModal" class="modalDialog">
    67. <div>
    68. <a href="#close" title="Close" class="close">X</a>
    69. <h2>Modal Box</h2>
    70. <p>This is a sample modal box that can be created using the powers of CSS3.</p>
    71. <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
    72. </div>
    73. </div>
    75. </body>
    76. </html>


    EDIT: Aufm Handy mit Chrome geht's, mit Firefox aufm Desktop PC nicht.
    Polling is trolling!

    Achtung: Ich habe die komische Angewohnheit, simple Dinge zu verkomplizieren..

    Ahoi,

    also es funktioniert bei mir mit dem Original-Bespiel, als auch mit deiner Kopie ... ich könnte mir nur vorstellen, dass es vielleicht einen Konflikt mit deiner Browser-Version gibt oder du hast im FF vielleicht ein Ad-On laufen, dass die Funktion blockiert.

    Hast du es denn mal mit dem FF auf dem Handy versucht und mit dem Chrome auf dem PC?
    Grüße Manu

    Was Gott dem Menschen erspart hat, kann der Computer.
    Billy ©, (*1932), Schweizer Aphoristiker
    Quelle: www.Aphorismen.de

    Datt is doch plöde :/. Ich guck mal mitm Firefox aufm Handy etc.

    Wtf... Jetzt hab ich den PC von gestern auf heute halt neu angemacht und plötzlich gehts Oo?
    Auf mobilem FF sowie auch aufm Desktop FF wo's vorher nich ging.

    Naja sorry für den Thread, ich meld mich dann nochmal, falls was ist.

    Danke für eure Zeit!

    Polling is trolling!

    Achtung: Ich habe die komische Angewohnheit, simple Dinge zu verkomplizieren..