Melina: Hinweis beim löschen

Hallo,

ich hatte heute die Gelegenheit auf dem neuen Portal ello.co rumzuspielen. Dabei ist mir etwas cooles aufgefallen. Wenn ich einen Beitrag löschen möchte, kommt folgende Ansicht, die über den Ganzen Bildschirm geht (Seite wird nicht neu geladen).

http://fs2.directupload.net/images/141219/bxvc9xwf.jpg

Wenn ich dann auf Abbrechen klicke verschwindet das rote wieder, wenn ich auf OK klicke, wird der Beitrag gelöscht und die Seite wird neu geladen.

Meine Frage, wie wird so etwas umgesetzt? Mein Firebug hat leider nichts zum fassen bekommen. Ist das CSS oder JavaScript?

Finde die Lösung sehr gut gemacht, so kann keiner sagen er hätte es nicht gesehen. Würde diese Technik gerne auf meiner Seite umsetzten.

Vielleicht hat jemand eine Idee.

  1. Hakuna matata!

    Vielleicht hat jemand eine Idee.

    Ich habe mir nicht angesehen, wie das auf der Seite umgesetzt, aber ganz allgemein handelt es sich dabei um einen modalen Dialog. In HTML kann man diesen mit <dialog> auszeichnen. Öffnen und schließen kann man ihn über JavaScript:

    var dialog = document.querySelector('dialog');  
    dialog.showModal();  
    dialog.close();
    

    Gestalten kann man ihn über CSS:

    dialog {  
       display: none;  
    }  
    dialog[open] {  
       display: block;  
    }  
    
    

    Was macht dir konkret Schwierigkeiten?

    --
    “All right, then, I'll go to hell.” – Huck Finn
    1. Aloha ;)

      Mir ist da noch was in die Hände gefallen. Obwohl JavaScript bekanntermaßen mein Lieblingsspielzeug ist scheue ich ja immer wieder davor, es einzusetzen (weil einfach deaktivierbar) und bevorzuge wenn möglich reine CSS-Lösungen.

      Und ich habe da doch tatsächlich eine gefunden! Auch sehr interessant, muss ich sagen. Natürlich herrscht im gegebenen Beispiel leider ein bisschen divsuppe, vielleicht kann man das auch sinnvoller auszeichnen (<dialog> z.B., wie vorgeschlagen). Finde die Technik aber generell gut. Imho auch besser als per JavaScript, wie <dialog> wohl eigentlich gedacht ist.

      Grüße,

      RIDER

      --
      Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
      ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
      1. Hakuna matata!

        Obwohl JavaScript bekanntermaßen mein Lieblingsspielzeug ist scheue ich ja immer wieder davor, es einzusetzen (weil einfach deaktivierbar) und bevorzuge wenn möglich reine CSS-Lösungen.

        Imho auch besser als per JavaScript, wie <dialog> wohl eigentlich gedacht ist.

        Sehe ich nicht so, durch das Öffnen und Schließen per JavaScript wird der Zustand offen/geschlossen auch semantisch reflektiert, weil das open-Attribut und etwaige ARIA-Eigenschaften (aria-expanded) automatisch gesetzt werden. Das macht die JavaScript-Variante hier zugänglicher als die reine CSS-Lösung. CSS würde ich in diesem Fall höchstens als graceful degradation einsetzen.

        --
        “All right, then, I'll go to hell.” – Huck Finn
      2. Hallo,

        Und ich habe da doch tatsächlich eine gefunden! Auch sehr interessant, muss ich sagen. Natürlich herrscht im gegebenen Beispiel leider ein bisschen divsuppe, vielleicht kann man das auch sinnvoller auszeichnen (<dialog> z.B., wie vorgeschlagen). Finde die Technik aber generell gut. Imho auch besser als per JavaScript, wie <dialog> wohl eigentlich gedacht ist.

        dieses ist natürlich eine sehr schöne Lösung. Aber bisschen sehr viele DIVS für so ein Fenster? Aber OK, kann dem User ja egal sein. Was soll ich jetzt nehmen, die JS Lösung oder die CSS Lösung?

        1. Aloha ;)

          Nimm die JavaScript-Lösung. 1UnitedPower hat hier schon Recht, wenn er von graceful degradation spricht.

          Du musst auch bedenken, dass es nicht genügt, den Dialog einzublenden, du möchtest damit ja auch noch was machen. Du erwartest ja eine Eingabe, die wieder nur per JavaScript ausgewertet werden kann.

          Außerdem: Wer auf einer Seite interaktive Elemente bedienen möchte (und nichts anderes ist hier gefragt), dem muss klar sein, dass er dafür JavaScript zulassen muss.

          Sollten Dialoge (warum auch immer) in einem sehr statischen Kontext auftauchen (lies: in einem Kontext, der die Verwendung von JS nicht unbedingt voraussetzt), sieht das ganze eventuell noch einmal anders aus. Das ist jedoch ein sehr, sehr schmaler Usecase, der kaum eintreten wird. (Denkbares Beispiel: Eine Seite weist die User nach dem Laden per Layer darauf hin, dass die Inhalte veraltet sind, der User kann nur das Gelesen-haben bestätigen, was den Layer schließt).

          Ich fand die CSS-Lösung vor allem fachlich interessant, weniger in Bezug auf das konkrete Problem.

          Grüße,

          RIDER

          --
          Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
          ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
    2. Hallo,

      Ich habe mir nicht angesehen, wie das auf der Seite umgesetzt, aber ganz allgemein handelt es sich dabei um einen modalen Dialog. In HTML kann man diesen mit <dialog> auszeichnen. Öffnen und schließen kann man ihn über JavaScript:

      var dialog = document.querySelector('dialog');

      dialog.showModal();
      dialog.close();

      
      > Gestalten kann man ihn über CSS:  
      > ~~~css
      
      dialog {  
      
      >    display: none;  
      > }  
      > dialog[open] {  
      >    display: block;  
      > }  
      > 
      
      

      Was macht dir konkret Schwierigkeiten?

      vielen Dank für deine Erklärung. Da ich mich mit Javascript kaum auskennen wüsste ich jetzt nicht einmal wie ich es umsetzten könnte wenn ich auf den Button / Link „löschen“ klicke das <dialog> angesprochen wird.

      1. Aloha ;)

        Da ich mich mit Javascript kaum auskennen wüsste ich jetzt nicht einmal wie ich es umsetzten könnte wenn ich auf den Button / Link „löschen“ klicke das <dialog> angesprochen wird.

        Da stellt sich mir aber in Bezug auf mein Posting von gerade eben die Frage, wie du einen solchen Layer ohne JavaScript-Kentnisse überhaupt nutzen möchtest. Imho gibt es da nur wenige sinnvolle Anwendungen dafür - und auch diese sind dann wahrscheinlich bis auf sehr wenige Ausnahmen eher eine UX-Katastrophe...

        Kurz gesagt: Mir ist der Usecase nicht klar.

        Grüße,

        RIDER

        --
        Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
        ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
  2. hi,

    Finde die Lösung sehr gut gemacht, so kann keiner sagen er hätte es nicht gesehen.

    Ja, rein optisch ist das gut.

    Würde diese Technik gerne auf meiner Seite umsetzten.

    Würde ich mir genauer angucken, ob das auch nicht versehentlich umgangen werden kann. Wenn beispielsweise ein Confirm-Dialog bei Nichtverfügbarkeit bestimmter Features (JS) nicht erscheint und der Request vom Browser aus trotzdem rausgeht, ist das schlecht.

    MfG