Modal

Preview
HTML
Context
Info

Preview


        
        
        <div class="modal  js-modal" id="">
    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.
</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."
  }
}

Handle: @modal--default
Tags:
Variants (5): default, wide, example, practice, success
Preview:
- With layout
Filesystem Path: src/patterns/components/modal/modal.twig
Referenced by (11): @modal--wide, @modal--example, @modal--practice, @modal--success, @person, @person--without-image, @person--practice, @person--media, @person--cv, @s-apply, @s-apply--practice

Preview


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

<div class="modal modal--wide " id="practice-modal">
    <div class="grid">
        <div class="grid__col grid__col--xs-22">
            <h2 class="color-green">VKG põlevkivikütteõlide tehniline spetsifikatsioon</h2>
        </div>
        <div class="grid__col grid__col--xs-24 grid__col--top-gutter-xs-1">
            <div class="table-container">
                <table class="table">
                    <thead class="table__head">
                        <tr class="table__row">

                            <th class="table__element table__element--head">
                                Näitarvu nimetus
                            </th>

                            <th class="table__element table__element--head">
                                Norm
                            </th>

                            <th class="table__element table__element--head">

                            </th>

                            <th class="table__element table__element--head">

                            </th>

                            <th class="table__element table__element--head">

                            </th>

                            <th class="table__element table__element--head">
                                Katsemeetodid
                            </th>
                        </tr>
                        <tr class="table__row">

                            <th class="table__element table__element--head">

                            </th>

                            <th class="table__element table__element--head">
                                VKG extra light
                            </th>

                            <th class="table__element table__element--head">
                                VKG sweet
                            </th>

                            <th class="table__element table__element--head">
                                VKG C
                            </th>

                            <th class="table__element table__element--head">
                                VKG D
                            </th>

                            <th class="table__element table__element--head">

                            </th>
                        </tr>
                    </thead>
                    <tbody class="table__body">
                        <tr class="table__row">
                            <th class="table__element table__element--head">
                                Tihedus 15 °C juures, kg/m3, maks.
                            </th>

                            <td class="table__element table__element--body">
                                923
                            </td>

                            <td class="table__element table__element--body">
                                994
                            </td>

                            <td class="table__element table__element--body">
                                Ei normita
                            </td>

                            <td class="table__element table__element--body">
                                Ei normita
                            </td>

                            <td class="table__element table__element--body">
                                ASTM D 4052
                            </td>
                        </tr>
                        <tr class="table__row">
                            <th class="table__element table__element--head">
                                Kinemaatiline viskoossus 50 °C juures, cSt, maks.
                            </th>

                            <td class="table__element table__element--body">
                                4
                            </td>

                            <td class="table__element table__element--body">
                                25
                            </td>

                            <td class="table__element table__element--body">

                            </td>

                            <td class="table__element table__element--body">

                            </td>

                            <td class="table__element table__element--body">
                                ASTM D 445 või ISO 3104
                            </td>
                        </tr>
                        <tr class="table__row">
                            <th class="table__element table__element--head">
                                Tingviskoossus 80 °C juures, kraadides, maks.
                            </th>

                            <td class="table__element table__element--body">

                            </td>

                            <td class="table__element table__element--body">

                            </td>

                            <td class="table__element table__element--body">
                                1,5
                            </td>

                            <td class="table__element table__element--body">
                                2,8
                            </td>

                            <td class="table__element table__element--body">
                                ASTM D 1665
                            </td>
                        </tr>
                        <tr class="table__row">
                            <th class="table__element table__element--head">
                                Vee massiosa, %, maks.
                            </th>

                            <td class="table__element table__element--body">
                                0,3
                            </td>

                            <td class="table__element table__element--body">
                                1
                            </td>

                            <td class="table__element table__element--body">
                                1
                            </td>

                            <td class="table__element table__element--body">
                                1
                            </td>

                            <td class="table__element table__element--body">
                                ASTM D 95 või ISO 3733
                            </td>
                        </tr>
                        <tr class="table__row">
                            <th class="table__element table__element--head">
                                Tuha massiosa, %, maks.
                            </th>

                            <td class="table__element table__element--body">
                                0,02
                            </td>

                            <td class="table__element table__element--body">
                                0,02
                            </td>

                            <td class="table__element table__element--body">
                                0,08
                            </td>

                            <td class="table__element table__element--body">
                                0,2
                            </td>

                            <td class="table__element table__element--body">
                                ASTM D 482 või ISO 6245
                            </td>
                        </tr>
                        <tr class="table__row">
                            <th class="table__element table__element--head">
                                Väävli massiosa, %, maks.
                            </th>

                            <td class="table__element table__element--body">
                                0,9
                            </td>

                            <td class="table__element table__element--body">
                                0,8
                            </td>

                            <td class="table__element table__element--body">
                                0,8
                            </td>

                            <td class="table__element table__element--body">
                                0,8
                            </td>

                            <td class="table__element table__element--body">
                                ASTM D 4294
                            </td>
                        </tr>
                        <tr class="table__row">
                            <th class="table__element table__element--head">
                                Leektäpp, °C: lahtises tiigis, min.
                            </th>

                            <td class="table__element table__element--body">
                                50
                            </td>

                            <td class="table__element table__element--body">

                            </td>

                            <td class="table__element table__element--body">
                                -10
                            </td>

                            <td class="table__element table__element--body">
                                61
                            </td>

                            <td class="table__element table__element--body">
                                ISO 2592
                            </td>
                        </tr>
                        <tr class="table__row">
                            <th class="table__element table__element--head">
                                kinnises tiigis, min
                            </th>

                            <td class="table__element table__element--body">

                            </td>

                            <td class="table__element table__element--body">
                                67
                            </td>

                            <td class="table__element table__element--body">

                            </td>

                            <td class="table__element table__element--body">

                            </td>

                            <td class="table__element table__element--body">
                                ASTM D 93 või ISO 2719
                            </td>
                        </tr>
                        <tr class="table__row">
                            <th class="table__element table__element--head">
                                Hangumistemperatuur, °C, maks.
                            </th>

                            <td class="table__element table__element--body">
                                -30
                            </td>

                            <td class="table__element table__element--body">
                                -17
                            </td>

                            <td class="table__element table__element--body">
                                -25
                            </td>

                            <td class="table__element table__element--body">
                                -15
                            </td>

                            <td class="table__element table__element--body">
                                ASTM D 97
                            </td>
                        </tr>
                        <tr class="table__row">
                            <th class="table__element table__element--head">
                                Alumine eripõlemissoojus, MJ/kg, min.
                            </th>

                            <td class="table__element table__element--body">

                            </td>

                            <td class="table__element table__element--body">

                            </td>

                            <td class="table__element table__element--body">

                            </td>

                            <td class="table__element table__element--body">
                                40
                            </td>

                            <td class="table__element table__element--body">
                                ASTM D 4868
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </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.",
    "table": {
      "titles": [
        [
          "Näitarvu nimetus",
          "Norm",
          null,
          null,
          null,
          "Katsemeetodid"
        ],
        [
          null,
          "VKG extra light",
          "VKG sweet",
          "VKG C",
          "VKG D",
          null
        ]
      ],
      "body": [
        [
          "Tihedus 15 °C juures, kg/m3, maks.",
          "923",
          "994",
          "Ei normita",
          "Ei normita",
          "ASTM D 4052"
        ],
        [
          "Kinemaatiline viskoossus 50 °C juures, cSt, maks.",
          "4",
          "25",
          null,
          null,
          "ASTM D 445 või ISO 3104"
        ],
        [
          "Tingviskoossus 80 °C juures, kraadides, maks.",
          null,
          null,
          "1,5",
          "2,8",
          "ASTM D 1665"
        ],
        [
          "Vee massiosa, %, maks.",
          "0,3",
          "1",
          "1",
          "1",
          "ASTM D 95 või ISO 3733"
        ],
        [
          "Tuha massiosa, %, maks.",
          "0,02",
          "0,02",
          "0,08",
          "0,2",
          "ASTM D 482 või ISO 6245"
        ],
        [
          "Väävli massiosa, %, maks.",
          "0,9",
          "0,8",
          "0,8",
          "0,8",
          "ASTM D 4294"
        ],
        [
          "Leektäpp, °C: lahtises tiigis, min.",
          "50",
          null,
          "-10",
          "61",
          "ISO 2592"
        ],
        [
          "kinnises tiigis, min",
          null,
          "67",
          null,
          null,
          "ASTM D 93 või ISO 2719"
        ],
        [
          "Hangumistemperatuur, °C, maks.",
          "-30",
          "-17",
          "-25",
          "-15",
          "ASTM D 97"
        ],
        [
          "Alumine eripõlemissoojus, MJ/kg, min.",
          null,
          null,
          null,
          "40",
          "ASTM D 4868"
        ]
      ]
    }
  },
  "modifier": "modal--wide"
}

Handle: @modal--wide
Tags:
Variants (5): default, wide, example, practice, success
Preview:
- With layout
Filesystem Path: src/patterns/components/modal/modal--wide.twig
References (2): @table, @modal

Example

Preview
HTML
Context
Info

Preview


        
        
        <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."
  }
}

Handle: @modal--example
Tags:
Variants (5): default, wide, example, practice, success
Preview:
- With layout
Filesystem Path: src/patterns/components/modal/modal--example.twig
References (1): @modal

Practice

Preview
HTML
Context
Info

Preview


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

<div class="modal  " id="practice-modal">

    <div class="practice-form  ">
        <form class="practice-form__form">
            <div class="text">
                <h2 class="color-green">Praktika taotlus</h2>

                <div class="textfield textfield--required">
                    <label class="textfield__label " for="field1">
        Eesnimi
    </label>
                    <div class="textfield__inner">
                        <input class="textfield__input" type="text" id="field1" name="" value="" placeholder="">
                    </div>
                </div>

                <div class="textfield textfield--required">
                    <label class="textfield__label " for="field2">
        Perekonnanimi
    </label>
                    <div class="textfield__inner">
                        <input class="textfield__input" type="text" id="field2" name="" value="" placeholder="">
                    </div>
                </div>

                <div class="textfield textfield--required">
                    <label class="textfield__label " for="field3">
        Elukoht
    </label>
                    <div class="textfield__inner">
                        <input class="textfield__input" type="text" id="field3" name="" value="" placeholder="">
                    </div>
                </div>

                <div class="textfield textfield--required">
                    <label class="textfield__label " for="field4">
        Telefon
    </label>
                    <div class="textfield__inner">
                        <input class="textfield__input" type="tel" id="field4" name="" value="" placeholder="">
                    </div>
                </div>

                <div class="textfield textfield--required">
                    <label class="textfield__label " for="field5">
        Õppeasutus
    </label>
                    <div class="textfield__inner">
                        <input class="textfield__input" type="text" id="field5" name="" value="" placeholder="">
                    </div>
                </div>

                <div class="textfield textfield--required">
                    <label class="textfield__label " for="field6">
        Eriala
    </label>
                    <div class="textfield__inner">
                        <input class="textfield__input" type="text" id="field6" name="" value="" placeholder="">
                    </div>
                </div>

                <div class="textfield textfield--required">
                    <label class="textfield__label " for="field7">
        Kursus
    </label>
                    <div class="textfield__inner">
                        <input class="textfield__input" type="text" id="field7" name="" value="" placeholder="">
                    </div>
                </div>

                <div class="textfield textfield--required textarea">
                    <label class="textfield__label " for="field8">
        Varem sooritatud praktikad (nimetada ettevõtted)
    </label>
                    <div class="textfield__inner">
                        <textarea class="textfield__input textarea__input     " type="text" id="field8" name=""></textarea>

                    </div>
                </div>

                <div class="textfield textfield--required select">
                    <label class="textfield__label select__label" for="field9">
        Kas soovid vaatluspraktikat või osaluspraktikat (vaatluspraktika on alati tasuta)
    </label>
                    <div class="textfield__inner">
                        <select name="" id="field9" class="textfield__input select__input">
                    <option
                value="1"
                            >Option 1</option>
                    <option
                value="2"
                 selected             >Option 2</option>
                    <option
                value="3"
                            >Option 3</option>
                    <option
                value="4"
                            >Option 4</option>
            </select>
                        <svg class="icon textfield--required select__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow-down"></use>
</svg>

                    </div>
                </div>
                <div class="datepicker-field  textfield--required" id="field10">

                    <div class="textfield textfield--required">
                        <label class="textfield__label " for="datepicker-input1">
        Algus (päev, kuu)
    </label>
                        <div class="textfield__inner">
                            <input class="textfield__input" type="text" id="datepicker-input1" name="datepicker" value="" placeholder="" autocomplete="off" readonly>
                        </div>
                    </div>
                </div>
                <div class="datepicker-field  textfield--required" id="field11">

                    <div class="textfield textfield--required">
                        <label class="textfield__label " for="datepicker-input2">
        Lõpp (päev, kuu)
    </label>
                        <div class="textfield__inner">
                            <input class="textfield__input" type="text" id="datepicker-input2" name="datepicker" value="" placeholder="" autocomplete="off" readonly>
                        </div>
                    </div>
                </div>

                <div class="textfield textfield--required select">
                    <label class="textfield__label select__label" for="field12">
        Millisesse kontserni ettevõttesse soovid praktikale tulla?
    </label>
                    <div class="textfield__inner">
                        <select name="" id="field12" class="textfield__input select__input">
                    <option
                value="1"
                            >Option 1</option>
                    <option
                value="2"
                 selected             >Option 2</option>
                    <option
                value="3"
                            >Option 3</option>
                    <option
                value="4"
                            >Option 4</option>
            </select>
                        <svg class="icon textfield--required select__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow-down"></use>
</svg>

                    </div>
                </div>

                <div class="textfield textfield--required textarea">
                    <label class="textfield__label " for="field13">
        Praktika eesmärk (tulenevalt õppeasutuse praktika juhendist)
    </label>
                    <div class="textfield__inner">
                        <textarea class="textfield__input textarea__input     " type="text" id="field13" name=""></textarea>

                    </div>
                </div>

                <div class="textfield textfield--required textarea">
                    <label class="textfield__label " for="field14">
        Miks soovid praktikale tulla Viru Keemia Grupi ettevõtetesse?
    </label>
                    <div class="textfield__inner">
                        <textarea class="textfield__input textarea__input     " type="text" id="field14" name=""></textarea>

                    </div>
                </div>

                <div class="textfield textfield--required">
                    <label class="textfield__label " for="field15">
        Sinu emakeel
    </label>
                    <div class="textfield__inner">
                        <input class="textfield__input" type="text" id="field15" name="" value="" placeholder="">
                    </div>
                </div>

                <div class="textfield textfield--required">
                    <label class="textfield__label " for="field16">
        Kas saad hakkama mõnes muus keeles?
    </label>
                    <div class="textfield__inner">
                        <input class="textfield__input" type="text" id="field16" name="" value="" placeholder="">
                    </div>
                </div>
            </div>
            <button type="button" class="button button--block practice-form__button">
                    <span class="button__text">Saada</span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
            </span>
            </button>
        </form>

    </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."
  }
}

Handle: @modal--practice
Tags:
Variants (5): default, wide, example, practice, success
Preview:
- With layout
Filesystem Path: src/patterns/components/modal/modal--practice.twig
References (2): @m-practice-form, @modal

Success

Preview
HTML
Context
Info

Preview


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

<div class="modal  " id="practice-modal">
    <div class="grid">
        <div class="grid__col grid__col--xs-24">
            <h2 class="color-green">Praktika taotlus</h2>
        </div>
        <div class="grid__col grid__col--xs-24 grid__col--top-gutter-xs-1 grid__col--bottom-gutter-xs-1">
            <div class="text">
                <p>
                    <b>Sinu praktika taotlus on edukalt saadetud!</b><br/> Võtame sinuga ühendust.
                </p>
            </div>
        </div>
        <div class="grid__col grid__col--xs-24">
            <button type="button" class="button button--block ">
                    <span class="button__text">sulge aken</span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
            </span>
            </button>
        </div>
    </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."
  }
}

Handle: @modal--success
Tags:
Variants (5): default, wide, example, practice, success
Preview:
- With layout
Filesystem Path: src/patterns/components/modal/modal--success.twig
References (2): @button, @modal

Wide

Example

Practice

Success

Forms

Career

Gallery

News

News Detail

Products

Safety

Services

Services Technology

Copy environment

Modal

Wide

Example

Practice

Success

News Detail

Services Technology