Avatar billede steen_hansen Forsker
23. maj 2021 - 20:25 Der er 16 kommentarer

Kald modal på submit button: "Er du sikker?" / [Annullér] [Ja, jeg er sikker]

Brugeren skal have mulighed for at resette data, men skal have en advarsel i form af en modal og en mulighed for at vælge [Annullér] eller [Ja, jeg er sikker], når der submittes.

Hvis brugeren er sikker på at data skal resettes, trykkes der på [Ja, jeg er sikker], og der skal så fortsættes til den side, som der er angivet i <button type="submit" formaction="/includes/resetprio.asp" class="btn btn-warning" value="Nulstil"> (resetprio.asp nulstiller nogle prioriteter).

Hvis brugeren er usikker og fortryder, trykkes der på [Annullér], og brugeren kommer tilbage til siden med formularen.

Annullér-knappen skal have fokus, når modal er kaldt.

Jeg så engang et lignende spørgsmål på stackoverflow, men det kunne alligevel ikke benyttes. Håber meget der er en haj til det her.
Avatar billede jakobdo Ekspert
23. maj 2021 - 22:21 #1
Avatar billede steen_hansen Forsker
23. maj 2021 - 22:42 #2
jakobdo, det er et godt forslag, men jeg vil gerne have en modal lige midt på skærmen, hvor baggrunden er nedtonet, som man ikke kan "Escape" sig ud af, og som har dansk tekst på buttons. Brugerne skal virkelig guides og holdes i hånden (sagt uden at mene det nedladende).
Avatar billede jakobdo Ekspert
23. maj 2021 - 22:44 #3
Så kunne et forslag være at smide bootstrap på din side og bruge denne: https://getbootstrap.com/docs/4.0/components/modal/#live-demo
Avatar billede steen_hansen Forsker
23. maj 2021 - 22:46 #4
PS: Arbejds-PC'erne er med engelsk Windows 10. Så jeg vil tro der altid vil stå "Cancel" i stedet for "Annullér" osv. Det glemte jeg at få med.
Avatar billede steen_hansen Forsker
23. maj 2021 - 22:48 #5
Jeg faldt over denne side, men jeg har lidt svært ved at gennemskue brugen. Og hvordan man evt. kan replace engelsk med dansk.

https://www.vbsedit.com/html/ae073d50-e4a4-4e23-8e46-0cb1369965e7.asp
Avatar billede steen_hansen Forsker
23. maj 2021 - 22:57 #6
Sorry, jeg så ikke lige din kommentar :) Tjekker lige ........
Avatar billede steen_hansen Forsker
23. maj 2021 - 22:58 #7
PPS: Jeg benytter bootstrap
Avatar billede steen_hansen Forsker
23. maj 2021 - 23:02 #8
Det ser rigtig godt ud. Spørgsmålet er så hvordan jeg kommer videre til resetprio.asp, og hvordan får jeg dansk tekst på buttons?
Avatar billede steen_hansen Forsker
23. maj 2021 - 23:07 #9
Denne modal skal gerne komme op inden scriptet på resetprio.asp eksekveres v.hj.a. submit/formaction:

<input type="submit" formaction="/includes/resetprio.asp" class="btn btn-warning" value="Nulstil" autofocus="autofocus">

Når man trykker på denne submit, skal modal kaldes, så man kan annullere eller bekræfte.
Avatar billede jakobdo Ekspert
23. maj 2021 - 23:29 #10
Der skal du jo "lære" lidt om "web" flow. Hvis du ønsker at "noget" skal vises inden resetprio.asp, så er det jo at vise din confirm side først.
Der har du så 2 "knapper/links"
Et der fører til resetprio.asp og et link der fører tilbage (cancel/annuller)
Avatar billede steen_hansen Forsker
23. maj 2021 - 23:34 #11
Mht oversættelsen faldt jeg over dette:

    <script>
        var translateLabelOkay = "Okay";
        var translateLabelIAmSure = "Ja, jeg er sikker";
        var translateLabelNoCancel =  "Annuller";
        var translateLabelAreYouSure = "Er du sikker?";
    </script>

Det ligner noget json eller javascript, så buttons altid bliver oversat i henhold til den funktion de har. Men jeg er heller ikke sikker på hvordan det skal benyttes her. Man må næsten også kunne benytte classic asp. Jeg er dog i tvivl om hvilken metode ville være bedst, og hvordan det skal benyttes.
Avatar billede steen_hansen Forsker
24. maj 2021 - 00:01 #12
@jakobdo #10

Du mener redirecte til en anden side (en hel side) med menu, banner, footer og to knapper på?

[Annullér]  [Ja, jeg er sikker]

Det vil virke noget akavet, vil jeg mene, vil det ikke?
Avatar billede steen_hansen Forsker
24. maj 2021 - 00:11 #13
Så burde jeg jo nok hellere lave en <input type="button">, som åbner modal, hvor der så en submit button på.
Avatar billede steen_hansen Forsker
24. maj 2021 - 23:09 #14
Jakobdo, den vil ikke åbne modal. Har du nogen idé om hvorfor?

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#resetModal">Nulstil</button>

<!-- Modal -->
<div class="modal fade" id="resetModal" tabindex="-1" role="dialog" aria-labelledby="resetModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Reset</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Er du sikker på at du vil resette dine prioriteter?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
Avatar billede jakobdo Ekspert
25. maj 2021 - 11:58 #15
Det ser korrekt ud. Du har loadet bootstrap?
Og du har den rigtige version?
Der er forskel på version 4 og 5
Avatar billede steen_hansen Forsker
31. maj 2021 - 01:41 #16
Ja, den korrekte version er hentet. Jeg mener bestemt man kan benytte modal fra version 3. Sikkert også tidligere
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Kurser inden for grundlæggende programmering

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester