Many modern websites rely on popovers to drive user engagement, for example with an email list. However these have been complex to code traditionally. Now with modern HTML and CSS, we can make an animated popover easily and without any Javascript. It all relies on new props that are now supported by many browsers for your HTML elements. A button tag can be given the popovertarget property, and the string that it is assigned to matches the ID property of a div tag. The div can be styled however you want, and it will always pop up over the element regardless of Z index. By default, the popover will close if you click outside of the element or hit Escape. We can also customize and override the popover property, by setting the popover property on the div to manual. With some CSS key frames in the styling we now have a fully animated popover on our web page using modern HTML, and no Javascript required.
No comments:
Post a Comment