I’m sure this is going to be oldhat covered elsewhere, but I found out about this by playing around and it’s super useful!
from anvil.js.window import document
...#do all your init and form_show stuff
def do_me_a_pop_up(self,item,**args):
self.item = item
mouse_x = event.pageX
mouse_y = event.pageY
offset_x = 50 #adjust as needed
offset_y = 50 #adjust as needed
mouse_x -= offset_x
mouse_y -= offset_y
style = document.createElement("style")
document.head.appendChild(style)
rule = f".anvil-role-customalert {{position: absolute; background-color: white; border: 1px solid black; border-radius:15px; opacity: 0.75; padding: 10px; z-index: 1000; left: {mouse_x}px; top: {mouse_y}px; width: auto; height: auto;}}"
style.sheet.insertRule(rule)
alert(content=PopUp(item=self.item),large=False,buttons=[("Close")],role="customalert")
You need add a customalert role in the normal way, but don’t need to pop anything in your theme.css.