Dialog

const cntlDefaultDialog = new ac.popups.Dialog(
	{
		header: "Demo Dialig",
		target: document.body,
		width: "500px",
		visible: false
	},
	"#cntlDefaultDialog"
);

const cntlPositionShow = new ac.buttons.Button({}, "#cntlShowDefault");

cntlPositionShow.element.onclick = () => {
	cntlDefaultDialog.show();
};

<div class="d-flex flex-wrap" style="justify-content: center">
	<button id="cntlShowDefault">Show Popup</button>
</div>

<div id="cntlDefaultDialog">
	<p>The is a demo dialog with default settings.</p>
</div>

const cntlDragResizeDialog = new ac.popups.Dialog(
	{
		header: "Drag and Rezise Dialog",
		target: document.body,
		width: "500px",
		isModal: true,
		allowDragging: true,
		allowResize: true,
		resizeHandles: ["All"],
		visible: false
	},
	"#cntlDragResizeDialog"
);

const cntlShowDragResize = new ac.buttons.Button({}, "#cntlShowDragResize");

cntlShowDragResize.element.onclick = () => {
	cntlDragResizeDialog.show();
};

<div class="d-flex flex-wrap" style="justify-content: center">
	<button id="cntlShowDragResize">Show Popup</button>
</div>

<div id="cntlDefaultDialog">
	<p>The is a demo of a dialog that can be draggged and resized.</p>
</div>

const cntlModalDialog = new ac.popups.Dialog(
	{
		header: "Demo Modal",
		target: document.body,
		width: "500px",
		isModal: true,
		visible: false
	},
	"#cntlModalDialog"
);

const cntlShowModal = new ac.buttons.Button({}, "#cntlShowModal");

cntlShowModal.element.onclick = () => {
	cntlModalDialog.show();
};

<div class="d-flex flex-wrap" style="justify-content: center">
	<button id="cntlShowModal">Show Popup</button>
</div>

<div id="cntlModalDialog">
	<p>The is a demo modal dialog.</p>
</div>