Hvad er et modal-vindue?  Se eksempel...

Jf. wikipedia er et modal-vindue et vindue, som tager fokus og midlertidigt skjuler øvrigt indhold på siden. Modal-vindues skal lukkes før brugeren igen kan få adgang til det oprindelige vindue.

Hyperlinket til modal-vinduets indhold skal have tildelt et mål (eller en "href") og en relation (eller en rel="modal.open") for at vide at det netop skal åbnes i et modal vindue, som i dette eksempel: 
<a href="#MitModalVindue" 
   rel="modal:open">
Klikbar tekst
</a>

Modal-vinduets indhold skal vide, at det er skjult indtil det vises i modal-vinduet. Derfor skal indholdet have modal-klassen (class="modal"), som i nedenstående eksempel:
  
<div class="modal"
     id="MitModalVindue">
Indholdet som skal
vises i modal-vinduet 
</div>

 

 

Vidste du, at du altid kan inspicere din kode ved at klikke på WYSIWYG Editorens "Kilde" knap?

Når du markerer en tekst eller et element i WYSIWYG Editoren og skifter til kilde-visning er netop HTML-kilden til det element du markerede i den grafiske visning markeret i kildeteksten.

This page in English

Hvordan indsætter du et modal-vindue på dine sider.

Nedenstående trin viser hvordan du let kan indsætte et modal-vindue på sider i dit n-gen.net CMS.

Modal vinduet består af to elementer:

  • Linket der åbner modal-vinduet og
  • Indholdet der vises i modal-vinduet.


 i n-gen.net CMS gøres det således:

  1. Marker teksten (eller billedet) som du ønsker skal åbne/vise modal-vinduets indhold.
     
  2. Klik på Editorens link knap for at åbne nedenstående dialog:

     Bemærk:
     Protokol er sat til "<anden>" og URL starter med "#", hvilket viser den interne reference ID på modal-vinduets indhold, som skal vises ved klik.
     Du kan også at vise en anden side fra dit n-gen.net CMS som indhold af dit modal-vindue.
     Se et eksempel her som åbner hjaelp.n-gen.net kontaktformular i et modal-vindue.
     
  3. Klik på ADVANCERET fanen for at åbne nedenstående dialog: 

     Bemærk:
      -at i feltet Relation skal du skrive "modal:open".
      - at Titel værdien er valgfri: Når musens pointer svæver over linket vises et ToolTip med indholdet af "Titel"
     
  4.  Klik OK og nu er link-delen klar
     
  5.  Marker nu indholdet af modal-vinduet.
     
  6.  Klik på Editorens DIV ikon for at åbne nedenstående dialog:

     Bemærk:
     Skriv "modal" manuelt i Typografiark (CSS).
     
  7.  Klik på AVANCERET fanen for at åbne nedenstående dialog:

     Skriv "MitModalVindue" manuelt i Id tekstfeltet.

     Bemærk
      Id-feltets indhold skal stemme overens med det du skrev efter "#" i URL tekstfeltet i trin 2.
     
  8.  Klik OK for at lukke dialogen. Indholdet af det skjulte modal-vindue har en lys rød baggrund og en stiplet ramme for at tydeliggøre, at denne del af siden kun kan vise i Editoren, dvs. når du redigerer siden; den er skjult for de besøgende på din siden indtil de klikker på linket, der åbner modal-vinduet.
  9.  Gem herefter din side for at vise dit første modal-vindue i dit n-gen.net CMS.
    :-)

     

Last updated 15-06-2023 01:01:10