Embed Code Render Modal

ERPNext
,
1

I try to add an embed script. When i put this code in html.
It’s not rendering. If i put those code in web_template means its working.

My embed code:

  <div id="embed-modal">
    <style>
      /* Add your CSS styles here */
      #embed-modal {
        display: none; /* Hidden by default */
        position: fixed;
        z-index:  1;
        left:  0;
        top:  0;
        width:  100%;
        height:  100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.4);
      }
      .modal-content {
        background-color: #fefefe;
        margin:  15% auto;
        padding:  20px;
        border:  1px solid #888;
        width:  80%;
      }
      #close-modal {
        color: #aaa;
        float: right;
        font-size:  28px;
        font-weight: bold;
      }
      #close-modal:hover,
      #close-modal:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
      }
    </style>
    <div class="modal-content">
      <iframe src="https://formId?quizId=U2FsdGVkX1%2FuDALQuvarII4ARoWuzZWHpncUYW2iPqY%3D" width="100%" height="500px"></iframe>
      <button id="close-modal">Close</button>
    </div>
  </div>
  <script>
  document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('embed-modal').style.display = 'block';
  });

    document.getElementById('close-modal').addEventListener('click', function() {
      document.getElementById('embed-modal').style.display = 'none';
    });
  </script>

Error in console:
Refused to display ‘https://-----.in/’ in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’.

How to make this work. My frappe framework i installed in aws instance

2

Try wrapping your script in frappe.ready(() => { 'script here' }). It’s likely that the DOM element you’re trying to attach to doesn’t exist at the time your script is executing.

3

For example:
if user copies this code and paste it in their html file. I want to load my window as modal. If i added frappe.ready in html means. It will give undefined right.
How to make this work.

Code solution

4

I’m sorry I don’t really understand what you’re saying.

What / which HTML file would this be pasted in? I’m assuming this is a portal in the www folder of your custom app

If you’re looking for a modal inside of /app/, you should use the Frappe Dialog API