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>