Skip to content

Instantly share code, notes, and snippets.

@ydn

ydn/yui-2in3-modal-panel-example.html

Created January 11, 2011 02:44
Show Gist options
  • Save ydn/773926 to your computer and use it in GitHub Desktop.
Save ydn/773926 to your computer and use it in GitHub Desktop.
Download ZIP
Sample code for implementing a YUI 2 modal panel in YUI 3 using YUI 2in3.
Raw
yui-2in3-modal-panel-example.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>YUI 2in3 Modal Overlay Example</title>
</head>
<body class="yui-skin-sam">
<p>This is a demo of this code <a href="https://gist.github.com/773926">https://gist.github.com/773926</a>, which was introduced
in this blog post <a href="http://developer.yahoo.com/blogs/ydn/posts/2011/01/yui-2in3-modal-panel-example/">http://developer.yahoo.com/blogs/ydn/posts/2011/01/yui-2in3-modal-panel-example/</a>. Click the button below to show the modal, and prepare for amazement ;)</p>
<p><button id="show">show modal</button></p>
<!-- modal dialog content markup -->
<div id="content" style="visibility:hidden">
<div class="hd">Header</div>
<div class="bd">
Body
<p><button id="hide">hide modal</button></p>
</div>
<div class="ft">Footer</div>
</div>
<script src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"></script>
<script>
YUI().use('yui2-container', 'yui2-dragdrop', 'event', function(Y) {
var YAHOO = Y.YUI2;
var modal = new YAHOO.widget.Panel("content", {
width: "240px",
fixedcenter: true,
close: true,
draggable: true,
zindex: 4,
modal: true,
visible: false
});
modal.render(document.body);
Y.one('#show').on('click', function() {
modal.show();
});
Y.one('#hide').on('click', function() {
modal.hide();
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment