# CMS-Driven Accessible Modals (Run js before Accessible Modal Attribute)

**URL:** <https://forum.finsweet.com/t/cms-driven-accessible-modals-run-js-before-accessible-modal-attribute/1605>\
**Category:** Attributes\
**Created:** [July 10, 2023, 6:00am UTC](https://forum.finsweet.com/t/cms-driven-accessible-modals-run-js-before-accessible-modal-attribute/1605 "2023-07-10T06:00:19Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![timd](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/timd/32/926_2.png) [@timd](https://forum.finsweet.com/u/timd)\
**Post date:** [July 10, 2023, 6:00am UTC](https://forum.finsweet.com/t/cms-driven-accessible-modals-run-js-before-accessible-modal-attribute/1605/1 "2023-07-10T06:00:19Z")

</div>

Hello, I have multiple Accessible Modals on a page in a cms list and I would like to run some code prior to Attributes loading so that I can dynamically set the various attribute values (open-3, close-3, etc.)

Is there something I can listen for in my code or a way I can delay the Accessible Modal setup so as it only runs once my code has finished updating values?

---

<div class="post-metadata">

**Author:** ![timd](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/timd/32/926_2.png) [@timd](https://forum.finsweet.com/u/timd)\
**Post date:** [July 11, 2023, 1:08am UTC](https://forum.finsweet.com/t/cms-driven-accessible-modals-run-js-before-accessible-modal-attribute/1605/2 "2023-07-11T01:08:23Z")

</div>

For anyone having this issue, here was the solution ie. Add the Attributes embed script after running your code to add incremented attribute values.

```auto
<script>
window.onload = function() {
  // Select the parent element
  let parent = document.querySelector('.team-list_list');
  
  // Select all the child elements
  let items = parent.querySelectorAll('.team-list_lightbox-item');
  
  // Iterate over each item
  items.forEach((item, index) => {
    // We increment the index because it starts from 0
    let counter = index + 1;

    // Find the specific child elements within each item where you want to apply the attributes
    let buttonElement = item.querySelector('.team-list_modal-2_button');
    let coverElement = item.querySelector('.team-list_modal-2_cover');
    let popupElement = item.querySelector('.team-list_modal-2_popup');
    let closeElement = item.querySelector('.team-list_modal-2_close');
    
    // Add the attribute to the target elements
    if (buttonElement) buttonElement.setAttribute('fs-modal-element', `open-${counter}`);
    if (coverElement) coverElement.setAttribute('fs-modal-element', `close-${counter}`);
    if (closeElement) closeElement.setAttribute('fs-modal-element', `modal-${counter}`);
    if (popupElement) popupElement.setAttribute('fs-modal-element', `close-${counter}`);
  });
  //[Finsweet Attributes] Modal 
  (()=>{var t="https://cdn.jsdelivr.net/npm/@finsweet/attributes-modal@1/modal.js",e=document.querySelector(`script[src="${t}"]`);e||(e=document.createElement("script"),e.async=!0,e.src=t,document.head.append(e));})();
}
</script>

```