\n\n[Try it »](#)\n\n* * *\n\n## Closing Popups\n\nBy default, clicking outside the popup area or pressing the "Esc" key will close the popup. If you do not want the popup to close when clicking outside of it, you can add the data-dismissible="false" attribute (not recommended). You can also add a close button to the popup, using the data-rel="back" attribute on the button, and control the button's position via styling.\n\n| Description | Example |\n| --- | --- |\n| Right close button | (#) |\n| Left close button | (#) |\n| Using data-dismissible attribute | (#) |\n\n* * *\n\n## Positioning Popups\n\nBy default, the popup appears directly over the clicked element. If you need to control the position of the popup, you can use the data-position-to attribute on the link used to open the popup.\n\nThree ways to control the popup position:\n\n| Attribute Value | Description |\n| --- | --- |\n| data-position-to="window" | Popup is centered in the window |\n| data-position-to="#myId" | Popup is displayed over the specified #id element |\n| data-position-to="origin" | Default. Popup is displayed over the clicked element. |\n\n## Example\n\nWindow\n\nid="demo"\n\nOrigin\n\n[Try it »](#)\n\n* * *\n\n## Transitions\n\nBy default, popups have no transition effects. If needed, you can add transition effects using the data-transition="value" attribute ((#)):\n\n## All Transition Effects Example\n\nFade\n\n[Try it »](#)\n\n* * *\n\n## Popup Directional Arrows\n\nIf you need to add a directional arrow to the popup, you can use the data-arrow attribute and specify the value "l" (left), "t" (top), "r" (right), or "b" (bottom):\n\n## Example\n\nOpen popup\n\n\n\n[Try it »](#)\n\n* * *\n\n## Popup Dialogs\n\nYou can format a popup as a standard dialog (header, content, and footer markup):\n\n## Example\n\nOpen dialog popup\n\n