Component library

Modal

Last updated 2 November 2026

Defines a dynamic modal for use in the page.

Live demo

<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">
    By using this site, you agree to our <a href="#">Terms and Conditions</a>.
  </div>

</ins-modal>

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

Attributes

FIELD ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
with-backdrop	boolean	false	true, false	Renders the modal with a backdrop (dark)
light	boolean	false	true, false	Renders the modal backdrop as white
heading	string	-	-	Defines the heading of the modal
confirmation	boolean	false	true, false	Renders the modal as a confirmation popup
value	any	-	-	Defines the value of the modal which will be return to the event
width	string	100%	CSS valid units	Defines the width of the modal
height	string	auto	CSS valid units	Defines the height of the modal
close-button-label	string	CANCEL	-	Defines the label of the modal's close button
close-button-color	string	blue	Insites Colors	Defines the color of the modal's close button
close-button-icon	string	blue	Insites Font Icons	Defines the icon of the modal's close button
confirm-button-label	string	CANCEL	-	Defines the label of the modal's confirm button
confirm-button-color	string	blue	Insites Colors	Defines the color of the modal's confirm button
confirm-button-icon	string	blue	Insites Font Icons	Defines the icon of the modal's confirm button
button-alignment	string	center	left, right, center	Defines the alignment of the close and confirm buttons
prevent-click-outside	boolean	false	true, false	Defines if the modal can be close when clicking outside of it.
parent-render	string	""	-	Defines the id of the parent modal for use when inside an iframe page
no-button	boolean	false	true, false	Defines if the modal should have buttons or not
full-height	boolean	false	true, false	Defines if the modal content will scroll when the height exceeds the height of the screen

Events

EVENT	OBJECT	DESCRIPTION
insClose	click event	Emits an event when the modal is closed, cancelled or confirmed. Event detail includes the value and the type of action done.

Examples

Form in Modal Example

<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>

Full Height Attribute

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

<ins-modal
  id="modalFull"
  heading="Full Height Modal"
  with-backdrop
  full-height
  prevent-click-outside>
  <div>
    <div>
     Start
     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
     End
    </div>
  </div>
</ins-modal>

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

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