is there a way page.click to run the function

[bobwatcherx]

I want to make my own custom Dialog. and when clicked a yellow dialog appears. and when clicked anywhere, the yellow dialog disappears. is there a way?

My code

from flet import *

def main(page:Page):
	ct = Container(
			bgcolor="yellow",
			width=220,
			margin=margin.only(top=120,left=50),
			height=200,
			padding=20,
			offset=transform.Offset(0,0),
			animate_offset=animation.Animation(400,curve="easeIn"),
			content=Text("i am modal",size=20,color="black")
			)
	

	def hapus(e):
		page.overlay.append(
		ct
		)
		page.update()
	page.add(
		ElevatedButton("hapus",on_click=hapus),
	)


flet.app(target=main)

[JorgeAlvarez21]

There are really good examples in the documentation on using dialogs you should check it out! Here is how you could create your own custom modal and integrate it onto your page. I added a dark tint on the page to add elevation on blur the background a bit.

from flet import *

def main(page: Page):
	def open_modal(e):
		page.dialog = _modal_wrapper
		_modal_wrapper.controls.append(ct)
		page.dialog.open = True
		_modal_wrapper.visible = True
		page.update()

	def dismiss_modal(e):
		page.dialog.open = False
		_modal_wrapper.visible = False
		page.update()

	ct = Container(bgcolor="yellow", width=220, margin=margin.only(top=120, left=50), height=200, padding=20,
		offset=transform.Offset(0, 0), animate_offset=animation.Animation(400, curve="easeIn"),
		content=Text("i am modal", size=20, color="black"))

	_modal_wrapper = Stack(
		controls=[Container(expand=True, bgcolor=colors.BLACK, on_click=dismiss_modal, opacity=0.5, )])

	page.add(ElevatedButton("hapus", on_click=open_modal))

flet.app(target=main)