oda-framework/tools/containers/modal/index.html

It's an ES Progressive Framework based on the technology of Web Components and designed especially for creating custom UI/UX of any complexity for web and cross-platform PWA mobile applications.

<meta charset="UTF-8">

<button id="btn1" slot="buttons">button</button>
<button id="btn2" slot="buttons">iframe</button>
<button id="btn3" slot="buttons">showDropdown</button>

<script type="module">
    import '../../../oda.js';
    import "../containers.js"
    btn1.onclick = e => {
        ODA.showModal('oda-button', { icon: 'icons:warning', iconSize: 100, allowToggle: true }, {
            animation: 500, title: 'ЗАГОЛОВОК', icon: 'icons:error', help: 'sjdkafkjhfkjhasfdk', dblclick: (e) => {
                alert(e);
            }
        })
    }
    btn2.onclick = e => {
        ODA.showModal('iframe', { src: 'https://current.odant.org/api/H:1D03A3F3B5863BB/P:WORK/B:1D163F90CEC93D4/C:1D163F9191B17AC/~/client/pages/form/index.html#view=object-table', width: '1200px', height: '600px' }, { animation: 500, title: 'ЗАГОЛОВОК', fullSize: true })
    }
    btn3.onclick = e => {
        ODA.showModal('oda-button', { icon: 'icons:warning', iconSize: 100, allowToggle: true, click: async (e) => {
                await ODA.showDropdown('oda-button', { icon: 'icons:android', iconSize: 60, fill: 'green' }, { align: 'bottom' });
            } }, {
            animation: 500, title: 'click me for showDropdown ', help: 'sjdkafkjhfkjhasfdk',
        })
    }
</script>