Insites Docs Web Components V1OthersModal

Modal

Last updated on August 02, 2024.

Element: <ins-modal>

Defines a dynamic modal for use in the page.

Complete Example
This is a sample content.

Code Snippet

<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">This is a sample content.</div>
</ins-modal>

<script>
  var myModal = document.getElementById('myModal');
  var myButton = document.getElementById('myButton');
  myButton.addEventListener('click', () => {
    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 into 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

 

Events

 

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

 

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.