The Panel container provides the infrastructure for draggable, in-page, modal containers. Additionally, it supports a customizable close icon and manages global key events when the Panel is visible. This recipe will show you how to create a draggable, modal light-box for images that closes when the escape or enter key is pressed.
You will need to include the same JavaScript and CSS as the Tooltip container, as well as the dragdrop.js
, if you wish the panel to be draggable:
<link rel="stylesheet" type="text/css" href="pathToBuild/container/assets/skins/sam/container.css"/> <script src="pathToBuild/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script> <script src="pathToBuild/dragdrop/dragdrop-min.js" type="text/javascript"></script> <script src="pathToBuild/container/container-min.js" type="text/javascript"></script> <!-- ... --> <body class="yui-skin-sam">
You will also need...