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