How to push Modal to entire Dashboard

Help
1

Hi, I am trying to push a modal to the screen of a dashboard on a button click which is contained within a custom HTML block on my dashboard. Currently, when I click my button, the Modal gets pushed to cover the entire block but not the entire dashboard.

I have read in the Losant documentation that the actual Losant page consists of a group of iframes (the Dashboard Blocks) which have the sandbox attributes:

allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation allow-downloads

Given this, shouldn’t my modal button actually push the modal to the dashboard screen? or perhaps my code or understanding is incorrect.

My code for the body of the custom html block is below:

<div style="height: 100%; display: flex; flex-direction: column; justify-content: center;"> 
  <button onclick="document.getElementById('id01').style.display='block';">Open Modal</button>
  <div id="id01" class="w3-modal">
    <div class="w3-modal-content">
        <div class="w3-container">
        <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span>
        <p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p>
        </div>
    </div>
  </div>
</div>
2

Hi, and welcome to the Losant Forums!

If you are rendering a dashboard within an experience page and are attempting to open a modal whose markup and open/close methods are defined in the parent, then you can send a message from the child document (custom HTML block) to the parent document (the outer page) through the postMessage() method. Your code in the parent document should then listen for the message posted from the child and take action on receipt of it - in your case, opening the modal.

This article demonstrates this process with code examples - specifically the Sending data from child iframe to parent window section. I set up a test and verified that I was able to communicate from a Custom HTML Block to a listener within an experience layout.

If you are instead trying to open a modal whose markup and methods are within the same Custom HTML Block, and are wanting it to “break out” of the block and take over the parent document, then I don’t believe there is a way to do that - though I have not researched this. My gut says this is not possible for browser security reasons.

Let us know if this answers your question!

3

Thank you Dylan, this has answered my question. The ‘post message’ method seems the best approach for my circumstances.