Copy environment

Modal

Example

<a href="#modal" data-js="open-modal">open modal</a>

<div class="modal  js-modal" id="modal">
    <div class="text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore qui repellendus architecto consectetur hic, modi aut totam eveniet blanditiis ex rem aliquam aspernatur, ullam quibusdam dolorum accusamus temporibus consequatur aperiam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore qui repellendus architecto consectetur hic, modi aut totam eveniet blanditiis ex rem aliquam aspernatur, ullam quibusdam dolorum accusamus temporibus consequatur aperiam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore qui repellendus architecto consectetur hic, modi aut totam eveniet blanditiis ex rem aliquam aspernatur, ullam quibusdam dolorum accusamus temporibus consequatur aperiam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore qui repellendus architecto consectetur hic, modi aut totam eveniet blanditiis ex rem aliquam aspernatur, ullam quibusdam dolorum accusamus temporibus consequatur aperiam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore qui repellendus architecto consectetur hic, modi aut totam eveniet blanditiis ex rem aliquam aspernatur, ullam quibusdam dolorum accusamus temporibus consequatur aperiam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore qui repellendus architecto consectetur hic, modi aut totam eveniet blanditiis ex rem aliquam aspernatur, ullam quibusdam dolorum accusamus temporibus consequatur aperiam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore qui repellendus architecto consectetur hic, modi aut totam eveniet blanditiis ex rem aliquam aspernatur, ullam quibusdam dolorum accusamus temporibus consequatur aperiam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore qui repellendus architecto consectetur hic, modi aut totam eveniet blanditiis ex rem aliquam aspernatur, ullam quibusdam dolorum accusamus temporibus consequatur aperiam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore qui repellendus architecto consectetur hic, modi aut totam eveniet blanditiis ex rem aliquam aspernatur, ullam quibusdam dolorum accusamus temporibus consequatur aperiam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore qui repellendus architecto consectetur hic, modi aut totam eveniet blanditiis ex rem aliquam aspernatur, ullam quibusdam dolorum accusamus temporibus consequatur aperiam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore qui repellendus architecto consectetur hic, modi aut totam eveniet blanditiis ex rem aliquam aspernatur, ullam quibusdam dolorum accusamus temporibus consequatur aperiam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore qui repellendus architecto consectetur hic, modi aut totam eveniet blanditiis ex rem aliquam aspernatur, ullam quibusdam dolorum accusamus temporibus consequatur aperiam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore qui repellendus architecto consectetur hic, modi aut totam eveniet blanditiis ex rem aliquam aspernatur, ullam quibusdam dolorum accusamus temporibus consequatur aperiam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore qui repellendus architecto consectetur hic, modi aut totam eveniet blanditiis ex rem aliquam aspernatur, ullam quibusdam dolorum accusamus temporibus consequatur aperiam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore qui repellendus architecto consectetur hic, modi aut totam eveniet blanditiis ex rem aliquam aspernatur, ullam quibusdam dolorum accusamus temporibus consequatur aperiam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore qui repellendus architecto consectetur hic, modi aut totam eveniet blanditiis ex rem aliquam aspernatur, ullam quibusdam dolorum accusamus temporibus consequatur aperiam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore qui repellendus architecto consectetur hic, modi aut totam eveniet blanditiis ex rem aliquam aspernatur, ullam quibusdam dolorum accusamus temporibus consequatur aperiam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore qui repellendus architecto consectetur hic, modi aut totam eveniet blanditiis ex rem aliquam aspernatur, ullam quibusdam dolorum accusamus temporibus consequatur aperiam.</p>
    </div>

</div>
{
  "language": "en-US",
  "isDemo": true,
  "class": "js-modal",
  "data": {
    "practiceForm": {
      "title": "Praktika taotlus",
      "fields": [
        {
          "component": "textfield",
          "modifier": "textfield--required",
          "data": {
            "label": "Eesnimi",
            "id": "field1"
          }
        },
        {
          "component": "textfield",
          "modifier": "textfield--required",
          "data": {
            "label": "Perekonnanimi",
            "id": "field2"
          }
        },
        {
          "component": "textfield",
          "modifier": "textfield--required",
          "data": {
            "label": "Elukoht",
            "id": "field3"
          }
        },
        {
          "component": "textfield",
          "modifier": "textfield--required",
          "data": {
            "label": "Telefon",
            "id": "field4",
            "type": "tel"
          }
        },
        {
          "component": "textfield",
          "modifier": "textfield--required",
          "data": {
            "label": "Õppeasutus",
            "id": "field5"
          }
        },
        {
          "component": "textfield",
          "modifier": "textfield--required",
          "data": {
            "label": "Eriala",
            "id": "field6"
          }
        },
        {
          "component": "textfield",
          "modifier": "textfield--required",
          "data": {
            "label": "Kursus",
            "id": "field7"
          }
        },
        {
          "component": "textarea",
          "modifier": "textfield--required",
          "data": {
            "label": "Varem sooritatud praktikad (nimetada ettevõtted)",
            "id": "field8"
          }
        },
        {
          "component": "select",
          "modifier": "textfield--required",
          "data": {
            "label": "Kas soovid vaatluspraktikat või osaluspraktikat (vaatluspraktika on alati tasuta)",
            "id": "field9",
            "options": [
              {
                "name": "Option 1",
                "value": "1"
              },
              {
                "name": "Option 2",
                "value": "2",
                "isSelected": true
              },
              {
                "name": "Option 3",
                "value": "3"
              },
              {
                "name": "Option 4",
                "value": "4"
              }
            ]
          }
        },
        {
          "component": "datepicker-field",
          "modifier": "textfield--required",
          "data": {
            "id": "field10",
            "input": {
              "id": "datepicker-input1",
              "name": "datepicker",
              "label": "Algus (päev, kuu)"
            }
          }
        },
        {
          "component": "datepicker-field",
          "modifier": "textfield--required",
          "data": {
            "id": "field11",
            "input": {
              "id": "datepicker-input2",
              "name": "datepicker",
              "label": "Lõpp (päev, kuu)"
            }
          }
        },
        {
          "component": "select",
          "modifier": "textfield--required",
          "data": {
            "label": "Millisesse kontserni ettevõttesse soovid praktikale tulla?",
            "id": "field12",
            "options": [
              {
                "name": "Option 1",
                "value": "1"
              },
              {
                "name": "Option 2",
                "value": "2",
                "isSelected": true
              },
              {
                "name": "Option 3",
                "value": "3"
              },
              {
                "name": "Option 4",
                "value": "4"
              }
            ]
          }
        },
        {
          "component": "textarea",
          "modifier": "textfield--required",
          "data": {
            "label": "Praktika eesmärk (tulenevalt õppeasutuse praktika juhendist)",
            "id": "field13"
          }
        },
        {
          "component": "textarea",
          "modifier": "textfield--required",
          "data": {
            "label": "Miks soovid praktikale tulla Viru Keemia Grupi ettevõtetesse?",
            "id": "field14"
          }
        },
        {
          "component": "textfield",
          "modifier": "textfield--required",
          "data": {
            "label": "Sinu emakeel",
            "id": "field15"
          }
        },
        {
          "component": "textfield",
          "modifier": "textfield--required",
          "data": {
            "label": "Kas saad hakkama mõnes muus keeles?",
            "id": "field16"
          }
        }
      ],
      "button": {
        "text": "Saada",
        "icon": "arrow"
      }
    },
    "button": {
      "text": "lorem ipsum"
    },
    "content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur nemo commodi eius minima ratione suscipit, itaque odit incidunt, porro doloribus cumque placeat, fugiat modi dignissimos beatae optio nulla ad saepe."
  }
}