Modal

<ins-button 
  label="OPEN MODAL" 
  solid id="myButton">
</ins-button>

<ins-modal 
  id="myModal"
  with-backdrop light
  heading="Terms and Conditions"
  confirmation value="DATA"
  width="400px" height="400px"
  close-button-label="CLOSE"
  close-button-icon="icon-close-1"
  close-button-color="secondary"
  confirm-button-label="ACCEPT"
  confirm-button-icon="icon-check1"
  confirm-button-color="positive"
  prevent-click-outside>

  <div id="myModalContent">Phasellus blandit leo ut odio.

Sed cursus turpis vitae tortor.

Cras dapibus.</div>

</ins-modal>

<script>
  var myModal = document.getElementById('myModal');
  var myButton = document.getElementById('myButton');
  myButton.addEventListener('insClick', () => {
    myModal.open();
  });
</script>

<ins-button 
  label="OPEN MODAL FORM" 
  solid 
  id="modalFormBtn">
</ins-button>

<ins-modal 
  id="modalForm"
  with-backdrop no-button
  parent-render="parentModal"
  heading="Modal Form Example"
  width="420px" height="390px">

  <form>
    <ins-input 
      label="First Name">
    </ins-input>
    
    <ins-input 
      label="Last Name">
    </ins-input>

    <ins-input 
      label="Email">
     </ins-input>

    <div class="text-right">
      
    <ins-button 
      label="Submit" solid>
    </ins-button>

    </div>

  </form>

</ins-modal>

<script>
    var modalFormBtn = document.getElementById('modalFormBtn');
    var modalForm = document.getElementById('modalForm');

    modalFormBtn.addEventListener('insClick', () => {
      modalForm.open();
    });
</script>

<ins-button 
  label="OPEN FULL HEIGHT MODAL" 
  solid 
  id="modalFullBtn">
</ins-button>

<ins-modal
  id="modalFull"
  heading="Lorem Ipsum"
  with-backdrop
  full-height
  prevent-click-outside>
  <div>
    <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet turpis erat. Integer metus enim, feugiat quis maximus ac, fringilla ac turpis. Pellentesque turpis augue, ultricies nec dapibus at, ultrices id ex. Donec in turpis maximus, ornare dolor sed, condimentum metus. Vivamus neque mi, luctus non lectus ullamcorper, suscipit luctus ex. Sed vitae ipsum in ipsum semper porta non vel nisl. Suspendisse eleifend, nunc at accumsan interdum, mi dui posuere massa, id vehicula justo ligula eget arcu.<br/>
    Nulla facilisi. Sed auctor, arcu ut pellentesque interdum, lectus erat pretium purus, ac congue mauris arcu in purus. Vivamus sapien lorem, pharetra eget odio vel, malesuada posuere lacus. Quisque quam ex, aliquet vel dui et, consectetur vulputate nisl. Nullam finibus volutpat malesuada. Sed sed tellus orci. Nullam metus eros, mollis sed tempus eu, tincidunt eget est. Donec commodo neque id sapien consequat efficitur. Pellentesque varius sagittis neque a tincidunt. Integer lobortis viverra ex, non pulvinar massa bibendum in. Curabitur ac sollicitudin mi, at finibus lacus. Donec ligula tortor, vestibulum eu leo ut, pharetra tristique odio. Nullam bibendum ornare risus vitae efficitur. Integer bibendum elit aliquet lacus lobortis ornare. Sed vel turpis eget mi iaculis auctor.<br/>
    Suspendisse potenti. Integer molestie ex a scelerisque congue. Nunc iaculis dignissim neque non ornare. Donec ac libero sed quam porttitor vehicula quis bibendum tellus. Aliquam a erat consequat, pulvinar enim vitae, dapibus ipsum. Pellentesque condimentum ligula eu elit tincidunt, sit amet maximus justo congue. Nulla eget tortor at neque sodales auctor. Aliquam convallis quis tellus eu malesuada.<br/>
    Maecenas lorem nisl, euismod sit amet gravida ut, semper sit amet velit. Pellentesque non elit risus. Phasellus vel quam bibendum, sodales erat ut, ornare turpis. Aliquam pellentesque elit ut justo gravida, non mollis sem tristique. Aenean eu dapibus eros. Sed vitae diam non elit iaculis efficitur at vitae sapien. Phasellus ante massa, faucibus sed laoreet ac, efficitur et lorem. Donec in euismod orci. Mauris ut lacinia sem. Curabitur vestibulum, mi eget dignissim elementum, purus lorem congue metus, in commodo ante arcu ut metus. Sed consectetur tempus arcu in dignissim. Suspendisse consectetur, erat mollis elementum blandit, magna ligula ornare leo, sed tristique mi dolor id felis.<br/>
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce nec consectetur dolor. Nam volutpat, lacus eget eleifend porttitor, nisl sem dictum lorem, at efficitur mauris metus quis mauris. Suspendisse nec odio congue, varius sapien in, iaculis ex. Integer pretium quis dolor in fermentum. Sed ultricies vitae libero a dapibus. Mauris sagittis accumsan porttitor.<br/>
    Donec sit amet tortor vitae leo ornare pellentesque. Sed ex dui, rhoncus vel turpis vitae, faucibus pulvinar enim. Etiam in vehicula enim, sit amet vestibulum diam. Proin at mauris at augue viverra tincidunt sit amet a orci. Phasellus non odio est. Vivamus gravida libero vitae tincidunt posuere. In consectetur ullamcorper blandit. Morbi varius eleifend fermentum. In placerat eros mi, eget varius purus placerat a. Cras eget diam fermentum, elementum tortor eu, pretium nisl. Nullam at augue vulputate est viverra mollis. Donec id ipsum viverra, tempus augue in, accumsan lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus ullamcorper suscipit quam ut molestie.<br/>
    Duis fringilla et erat id congue. Ut dignissim nulla ut metus maximus vestibulum. Nullam non mattis massa. Praesent ac tempus sem. In viverra accumsan faucibus. Donec at dui eget nulla tempus luctus. Aenean nec volutpat purus, nec malesuada felis. Suspendisse sapien elit, pellentesque non mi vel, vehicula tincidunt mauris. Proin pretium, nibh ultricies laoreet tincidunt, mauris risus iaculis dolor, ut auctor odio justo sit amet augue. Quisque vel varius risus. Donec euismod vehicula diam, dapibus suscipit arcu finibus vel. Proin nec volutpat ante, vel semper diam. Donec imperdiet sapien a justo rhoncus, in congue lectus feugiat.<br/>
    Donec malesuada a dolor sed sodales. Vestibulum fringilla turpis mi, non consequat sapien egestas eget. Pellentesque rutrum metus justo, molestie varius velit placerat in. Duis suscipit dui ac lectus scelerisque ullamcorper. Fusce vulputate nisi id dui eleifend rhoncus. Nam tempor lacus eget ipsum molestie, at venenatis leo semper. Aliquam at mi elit. Etiam pretium posuere ante eu rhoncus. Vestibulum elementum suscipit justo condimentum mollis.<br/>
    In non commodo lectus. Praesent mollis, tellus ultrices ornare ullamcorper, neque dolor laoreet nunc, vel luctus ligula lorem at enim. Curabitur pellentesque in est eget facilisis. Sed aliquam mauris in hendrerit blandit. Sed bibendum mi lorem, in maximus mauris viverra non. Donec tristique lectus eu gravida ultricies. Nullam euismod est lorem, vel molestie leo pretium vitae. Phasellus vel bibendum velit. In molestie aliquet interdum.<br/>
    Integer euismod, purus eu luctus auctor, tortor turpis mattis risus, sed molestie mi purus in lorem. Curabitur eu elit risus. Nunc suscipit felis dolor, vitae elementum turpis iaculis vel. Praesent ultricies vel felis eget molestie. Etiam facilisis et est eu faucibus. Vestibulum maximus, dolor vitae mollis sagittis, orci sem dapibus nulla, quis imperdiet arcu leo a erat. Curabitur lobortis nec risus maximus placerat. Morbi vitae massa quis nunc cursus tempor a feugiat tellus. Nulla facilisi. Sed feugiat elit non augue mollis eleifend. Nunc lacus orci, egestas ac velit in, consectetur fermentum tortor. Quisque rhoncus vitae lorem malesuada volutpat. Mauris congue quam nisl, congue sollicitudin erat consequat feugiat.<br/>
    Aliquam eu tortor malesuada, condimentum eros eget, mollis ante. Donec ullamcorper tempor elit vitae luctus. Nunc id arcu in lorem pulvinar interdum. Nam eu nibh in neque venenatis dapibus eget ac lacus. Etiam condimentum, metus eu feugiat aliquet, nulla mi tincidunt ante, quis gravida sapien orci a libero. Suspendisse vel molestie orci, eget rhoncus est. Aliquam vel consectetur libero. Donec rhoncus magna vitae pellentesque euismod. Curabitur suscipit diam id quam varius pellentesque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque et nisl non diam pellentesque placerat quis ut lorem.<br/>
    Quisque aliquam varius justo, ac molestie dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut at est tristique, malesuada orci id, elementum lectus. Cras non consectetur nisl, vitae iaculis dolor. Vivamus posuere nisi odio, in vehicula libero varius non. Praesent tempus at massa vel sollicitudin. Maecenas varius purus nec magna varius pulvinar. Vestibulum a nisi nec massa dictum pellentesque eu sed tellus. Sed eu molestie est, eu dictum sem. Phasellus egestas elit vitae est volutpat fringilla. Curabitur ultricies malesuada dignissim. Duis placerat orci eu vestibulum consequat. Nunc maximus felis et porttitor ullamcorper. Nunc finibus efficitur lorem.<br/>
    Etiam finibus elit erat, nec hendrerit mauris bibendum sed. Cras pretium justo in ipsum vulputate vulputate. Vestibulum suscipit ante dapibus luctus malesuada. Morbi ligula erat, volutpat sit amet interdum et, ornare sed mauris. Sed quis quam nibh. Vestibulum sit amet eleifend augue, quis sollicitudin eros. Etiam egestas purus ipsum.<br/>
    Pellentesque sagittis lacinia dictum. Nullam lectus odio, molestie sed venenatis nec, malesuada vitae mi. Suspendisse aliquet lorem sit amet metus feugiat, vitae auctor sapien aliquam. Cras gravida leo nec est cursus, at semper massa euismod. Nulla nunc nunc, facilisis sit amet nibh sed, ornare ultrices magna. Nam id luctus est. Vestibulum malesuada odio rutrum, volutpat velit eget, gravida dui. Fusce molestie lobortis turpis.<br/>
    Nulla ac venenatis turpis. Donec quis pretium eros, nec faucibus arcu. Cras a tempor est. Pellentesque quis risus eget est posuere vehicula. Fusce cursus eros erat, id lacinia odio maximus sed. Pellentesque lobortis pretium arcu at ullamcorper. Aliquam vestibulum massa ipsum, vel imperdiet orci porttitor in. Suspendisse dictum venenatis mattis. Nullam rhoncus laoreet orci, vitae euismod purus finibus tincidunt. Etiam eu lectus consectetur lacus feugiat sollicitudin vel eu ipsum. Etiam varius dui vel quam convallis feugiat. Aliquam consectetur neque quis libero venenatis, a mollis massa convallis. Aliquam vel nunc tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus sit amet libero purus.<br/>
    Nullam dapibus augue tortor, at sodales turpis laoreet nec. In ac euismod sem. Sed lorem orci, accumsan malesuada efficitur in, efficitur sit amet tellus. Integer eget molestie nulla. Pellentesque accumsan sem sed malesuada venenatis. Integer congue, metus vel suscipit luctus, eros ante fringilla libero, ut ultricies erat sem in ipsum. Mauris in ipsum mollis, bibendum massa non, faucibus nisl. Suspendisse porttitor euismod turpis. Sed erat enim, pulvinar sit amet porta eget, pellentesque non enim.<br/>
    Mauris vitae erat quis enim facilisis faucibus. Integer pellentesque iaculis orci. Duis ac ex laoreet, aliquam eros non, tincidunt nunc. Aenean vitae odio nunc. Ut pulvinar, tellus nec convallis luctus, eros orci euismod sapien, id ultricies turpis eros vel mi. Morbi sodales urna id dignissim pellentesque. Vestibulum ac viverra arcu. Vestibulum pharetra ligula tincidunt aliquet aliquet. Proin vitae diam sapien. Fusce rhoncus magna ut faucibus fermentum. Nulla suscipit, ante vitae tempus elementum, augue ipsum maximus lorem, non porttitor felis risus eget eros. Quisque eget mauris eu nibh tempor tempor non ut tortor. Nulla vitae arcu ac metus pretium varius sed et risus. Phasellus quis arcu arcu. Aenean sit amet est in purus rhoncus viverra eget et ipsum.<br/>
    Vivamus lacinia orci a leo finibus ornare nec cursus nisi. Proin id lacinia leo, sollicitudin blandit arcu. Praesent commodo nisl eu purus auctor, vitae efficitur mi auctor. Nunc imperdiet nunc vestibulum mauris commodo pellentesque eu in lectus. Nullam ut risus eros. Vestibulum cursus dui eget massa posuere, et aliquam quam rhoncus. Proin feugiat sit amet erat a ultricies. Mauris felis quam, egestas tristique mattis vel, ullamcorper a augue. Donec pretium efficitur pretium. Morbi at ex ut tortor venenatis dignissim. Donec dictum vel mauris a egestas. Nam quis sem volutpat, dapibus sem eu, pellentesque nunc. Aenean rutrum est massa, in fringilla nisl egestas sit amet. Praesent sed tortor et arcu tempus gravida. Morbi ac pretium augue, a ultrices diam.<br/>
    Integer congue accumsan mattis. Phasellus eu metus lorem. Proin laoreet molestie consectetur. Sed interdum quam vitae nisi luctus, at interdum tortor laoreet. Sed sit amet dignissim lorem. Aliquam faucibus gravida augue at scelerisque. Curabitur dignissim nisi massa, quis fermentum mi commodo non. Phasellus sit amet ullamcorper arcu.<br/>
    Nulla facilisi. Cras dignissim in eros pulvinar bibendum. Donec in magna in libero malesuada varius nec quis libero. Pellentesque in ipsum vel tortor luctus imperdiet. Duis id tortor dolor. Donec feugiat enim dolor, placerat eleifend urna egestas a. Donec mauris ante, pulvinar at sagittis ac, laoreet ut ex. In porttitor nibh erat, ac venenatis nulla gravida eget.
    </p>
  </div>
</ins-modal>

<script>
    var modalFullBtn = document.getElementById('modalFullBtn');
    var modalFull = document.getElementById('modalFull');

    modalFullBtn.addEventListener('insClick', () => {
      modalFull.open();
    });
</script>