Overlay

An overlay allows to give additional information or to collect data.

Here you see the code to create an overlay. The overlay is positioned in the middle of the window. In the upper right corner it can be removed by the 'x'. In this example a close button is added. In the corresponding event listener the overlay is removed too.

Please press the button:

Address

The overlay opens a textarea to input an unformatted address:

var k8form=Object.create(k8);
var el_btn_openOverlay=document.getElementById("btn_openOverlay");
el_btn_openOverlay.addEventListener("click", function(e){
  var ov_form={
    "templatetype":"form",
    "selector":".k8-overlay_content",
    "form":{"id":"dialog_form"},
    "fields":[
      {"label":"Address","name":"mycontent","tagName":"textarea","required":true,"style":"height:200px", "value":"K8 Web Kit\nKlaus Eisert\nBechhausenerstr. 8\n51399 Burscheid\nTelefon: 02174 748999\nEmail: eisert.klaus@gmail.com\nWebsite: https://tom24.info/webkitb5"},
      {"name":"OK","type":"submit","tagName":"button","fieldclass":"btn btn-primary"}
    ]
  };
  var el_overlay=k8form.createOverlay({});
  k8form.createform(ov_form);
  var el_form=document.getElementById("dialog_form");
  el_form.addEventListener("submit", function(e){
    e.preventDefault();
    var obj=form2obj(el_form);
    $(el_overlay).remove();
    console.log("mycontent="+obj.mycontent);
    var dat=text2address(obj);
    var el_resultform=document.getElementsByClassName("js_dataform")[0];
    obj2form(dat,el_resultform);
    console.log(dat);
    
  });
});

Use of Cookies

We use cookies to personalize content and ads, to provide social media features and to analyze access to our website. We also share information about your use of our website with our social media, advertising and analytics partners. Our partners may combine this information with other information that you have provided to them or that they have collected from your use of the Services.