<div>
    <h1>popup</h1>
    <hr />
    <p>
        创建弹出窗口。
    </p>
    <hr />
    <h2>示例</h2>
    <div id="popup-sample">
        <button id="button-popup">Popup</button>
    </div>
    <script type="text/javascript">
        const ui = window['lib-ui'];

        document.querySelector('#button-popup').addEventListener('click', () => {
            const popup = new ui.Popup({
                title: 'title long title, looooooong title, looooooooooooooooooooooooong ~',
                content: ui.createElement('div', 'class-content',
                    ui.createElement('span', span => span.innerText = 'Text content.')
                ),
                mask: false,
                // movable: false,
                resizable: true,
                collapsable: true,
                minWidth: 210,
                minHeight: 200,
                buttons: [
                    {
                        text: 'Loading', trigger: p => {
                            p.loading = true;
                            setTimeout(() => p.loading = false, 1000);
                            return false;
                        }
                    },
                    { text: 'OK' }
                ],
                onMoveEnded: () => console.log('move ended.', popup.rect),
                onResizeEnded: () => console.log('resize ended.', popup.rect)
            });
            popup.show();
            window.popup = popup;
        });
    </script>
    <style type="text/css">
        .ui-popup-mask .ui-popup-container {
            min-width: 210px;
            min-height: 200px;
            max-width: unset;
        }
    </style>
</div>