Using html 5 dialog element

There is a button inside the dialog to open the widget on both of them. Our problem is we want to use the dialog as a modal, but because we can control where to attach the widget elements, it can’t appear over a fullscreen dialog. Only the elements inside the dialog are visible on it when it is opened."
Locally Reproducible: (Yes/No):

code implemented:

<!doctype html>


<html lang="en">


<head>

  <title>Example</title>

  <meta charset="utf-8">

  <style>

    body {

      margin: 0;

      padding: 0;

    }

    #custom_fc_button {

      width: 10%;

      position: absolute;

      right: 1px;

      bottom: 20px;

    }

    dialog {

      width: 100%;

      height: 100%;

      max-width: 100%;

      max-height: 100%;

      background-color: #fabada;

    }

  </style>



</head>


<body>

  <div id="custom_fc_button" style="visibility:hidden;">

    <button type="button" id="open_fc_widget" onClick="openWidget()" style="cursor:pointer;">open widget outside</button>

  </div>

  <dialog>

    <h1>I am an HTML dialog as a modal, over the top of any other dialogs that might be present. Interaction outside the dialog is blocked.</h1>

    <button type="button" onClick="openWidget()">Open widget inside</button>

  </dialog>

  <script>

     window.fcSettings = {

    token: "8d3a4a04-5562-4f59-8f66-f84a269897a1",

    host: "https://wchat.freshchat.com",

    config: {

      headerProperty: {

        hideChatButton: true

      }

    },

    onInit: function() {

      window.fcWidget.on("widget:loaded",function() {

        document.getElementById('custom_fc_button').style.visibility = 'visible';

        window.fcWidget.on("unreadCount:notify", function(resp) {

          console.log(resp);

          test = resp;

        });

        window.fcWidget.on("widget:closed", function() {

          document.getElementById('fc_frame').style.visibility = 'hidden';

          document.getElementById('open_fc_widget').style.visibility = 'visible';

        });

        window.fcWidget.on("widget:opened", function(resp) {

          document.getElementById('open_fc_widget').style.visibility = 'hidden';

        });

      });

    }

  };



    var openWidget = function() {

      document.getElementById('fc_frame').style.visibility = 'visible';

      window.fcWidget.open();

    };


    window.onload = function() {

      // with modal

      document.querySelector('dialog').showModal();

      // no modal

      // document.querySelector('dialog').show();

    }


  </script>

  <script src="https://wchat.freshchat.com/js/widget.js" async></script>


</body>


</html>

Are you building an app on the Freshworks platform? — Custom app or Marketplace (public) app

I’m trying to learn what you are trying to achieve. But would you help me understand the business use case behind it? That can help us to conclude the most favorable use of the app platform or APIs for you.

You may want to open Freshchat widget as a center modal instead of the lower right corner. Am I right?