Overlay Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>YAHOO.widget.Overlay</title>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js" ></script>
<script type="text/javascript" src="./build/dragdrop/dragdrop.js" ></script>
<script type="text/javascript" src="./build/animation/animation.js" ></script>
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css" />
<link rel="stylesheet" type="text/css" href="./examples/container/css/example.css" />
<link rel="stylesheet" type="text/css" href="./examples/container/css/module.css" />
<link rel="stylesheet" type="text/css" href="./build/container/assets/container.css" />
<script type="text/javascript" src="./build/container/container.js"></script>
<style>
.overlay {
visibility:hidden;
border:1px solid black;
background-color:#FFFFFF;
z-index:10;
padding:5px;
}
</style>
<script language="javascript">
YAHOO.namespace("example.overlay");
YAHOO.example.overlay.overlays = [];
function init() {
// *****************************************************************
// This represents a Overlay already on the page
// *****************************************************************
YAHOO.example.overlay.oPredefined = new YAHOO.widget.Overlay("oPredefined", {visible:true, x:400, y:400} );
YAHOO.example.overlay.oPredefined.render();
// *****************************************************************
// This represents an Overlay completely pre-constructed from code
// *****************************************************************
YAHOO.example.overlay.oDynamic = new YAHOO.widget.Overlay("oDynamic", {visible:true, x:400, y:250} );
YAHOO.example.overlay.oDynamic.setHeader("Completely dynamic overlay");
YAHOO.example.overlay.oDynamic.setBody("I was created completely at runtime!");
YAHOO.example.overlay.oDynamic.render(document.body);
// *****************************************************************
// This represents a overlay with a container, but no body content defined
// *****************************************************************
YAHOO.example.overlay.oChangedAtRuntime = new YAHOO.widget.Overlay("oChangedAtRuntime", {visible:true, x:400, y:300} );
YAHOO.example.overlay.oChangedAtRuntime.setHeader("I was changed at runtime!");
YAHOO.example.overlay.oChangedAtRuntime.setBody("<b>My original markup text was replaced at runtime with this text.</b>");
YAHOO.example.overlay.oChangedAtRuntime.setFooter("The footer was changed too!");
YAHOO.example.overlay.oChangedAtRuntime.render();
// *****************************************************************
var button2 = document.getElementById("btnHide");
button2.onclick = hideAll;
var button3 = document.getElementById("btnShow");
button3.onclick = showAll;
var dd1 = new YAHOO.util.DD(YAHOO.example.overlay.oDynamic.element.id, "module");
dd1.onDrag = function() {
YAHOO.example.overlay.oDynamic.cfg.refireEvent("iframe");
var pos = YAHOO.util.Dom.getXY(YAHOO.example.overlay.oDynamic.element);
YAHOO.example.overlay.oDynamic.cfg.setProperty("xy", pos);
}
var dd2 = new YAHOO.util.DD(YAHOO.example.overlay.oPredefined.element.id, "module");
dd2.onDrag = function() {
YAHOO.example.overlay.oPredefined.cfg.refireEvent("iframe");
var pos = YAHOO.util.Dom.getXY(YAHOO.example.overlay.oPredefined.element);
YAHOO.example.overlay.oPredefined.cfg.setProperty("xy", pos);
}
var dd3 = new YAHOO.util.DD(YAHOO.example.overlay.oChangedAtRuntime.element.id, "module");
dd3.onDrag = function() {
YAHOO.example.overlay.oChangedAtRuntime.cfg.refireEvent("iframe");
var pos = YAHOO.util.Dom.getXY(YAHOO.example.overlay.oChangedAtRuntime.element);
YAHOO.example.overlay.oChangedAtRuntime.cfg.setProperty("xy", pos);
}
YAHOO.example.overlay.overlays["oPredefined"] = YAHOO.example.overlay.oPredefined;
YAHOO.example.overlay.overlays["oDynamic"] = YAHOO.example.overlay.oDynamic;
YAHOO.example.overlay.overlays["oChangedAtRuntime"] = YAHOO.example.overlay.oChangedAtRuntime;
}
function hideAll() {
for (var i in YAHOO.example.overlay.overlays) {
var m = YAHOO.example.overlay.overlays[i];
m.hide();
}
}
function showAll() {
for (var i in YAHOO.example.overlay.overlays) {
var m = YAHOO.example.overlay.overlays[i];
m.show();
}
}
function create() {
var form = document.forms["overlayform"];
// get form values
var id = form["id"].value;
var x = form["x"].value;
var y = form["y"].value;
var header = form["header"].value;
var body = form["body"].value;
var footer = form["footer"].value;
var visible = form["visible"].checked;
var effectArg;
if (form["effect"].selectedIndex > 0) {
var dur = form["duration"].value;
if (! dur) {
dur = 0.5;
} else {
dur = parseFloat(dur);
}
var effect = form["effect"].options[form["effect"].selectedIndex].value;
var effectClass = eval(effect);
effectArg = {
effect:effectClass,
duration:dur
}
}
var width = form["width"].value;
var height = form["height"].value;
var zIndex = form["zIndex"].value;
var constrain = form["constraintoviewport"].checked;
var useIframe = form["iframe"].checked;
var fixedcenter = form["fixedcenter"].checked;
var context = form["context"].value;
var contextArg = new Array();
if (context) {
contextArg[0] = context;
contextArg[1] = form["elementMagnet"].options[form["elementMagnet"].selectedIndex].value;
contextArg[2] = form["contextMagnet"].options[form["contextMagnet"].selectedIndex].value;
}
var args = {};
args.visible = visible;
if (effectArg) {
args.effect = effectArg;
}
if (x) {
args.x = parseInt(x);
}
if (y) {
args.y = parseInt(y);
}
if (width) {
args.width = width;
}
if (height) {
args.height = height;
}
if (zIndex) {
args.zIndex = zIndex;
}
args.constraintoviewport = constrain;
args.iframe = useIframe;
args.fixedcenter = fixedcenter;
if (contextArg.length > 0) {
args.context = contextArg;
} else {
args.context = null;
}
var newMod;
var isNew = true;
if (YAHOO.example.overlay.overlays[id]) {
newMod = YAHOO.example.overlay.overlays[id];
newMod.cfg.applyConfig(args);
isNew = false;
} else {
newMod = new YAHOO.widget.Overlay(id, args);
YAHOO.example.overlay.overlays[id] = newMod;
}
if (header) {
newMod.setHeader(header);
}
if (body) {
newMod.setBody(body);
}
if (footer) {
newMod.setFooter(footer);
}
if (isNew) {
newMod.render(document.body);
} else {
newMod.render();
}
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body>
<div class="box">
<div class="hd">
<h1>Overlay Example</h1>
</div>
<div class="bd">
<button id="btnHide">Hide All</button>
<button id="btnShow">Show All</button>
</div>
<p>An Overlay is a <a href="module.html">Module</a> that is positioned to float above document content. It contains no default behavior or styling, but has several properties for manipulating its size and position. Overlay is extended to create subclasses like <a href="tooltip.html">Tooltip</a>, <a href="panel.html">Panel</a>, and <a href="dialog.html">Dialog</a>.</p>
<p>In this example, there are three draggable overlays that are displayed, two of which are already completely or partially marked up, and one which is dynamically created using JavaScript alone.</p>
<p>Each overlay automatically has a hidden IFRAME element wired underneath it when the browser is Internet Explorer, so that the overlays can be positioned above SELECT elements without the SELECT bleeding through. The IFRAME also ensures that the overlay can be positioned above Flash elements easily.</p>
</div>
<select style="display:block">
<option>This is a <select> element, helpul for testing the IFRAME shim</option>
</select>
<div id="oPredefined" style="visibility:hidden;position:absolute">
<div class="hd">Predefined Overlay Header</div>
<div class="bd">I was created using simple predefined markup.</div>
<div class="ft">Predefined Overlay Footer</div>
</div>
<div id="oChangedAtRuntime" style="visibility:hidden;position:absolute">
<div class="hd">Placeholder Header</div>
<div class="bd">This is only placeholder text in the markup.</div>
<div class="ft">Placeholder Footer</div>
</div>
<img id="ctx1" src="./examples/container/img/ctx.gif" />
<form onsubmit="return false" id="overlayform">
<div class="overlayform">
<div class="formheader">
Create / Modify a Dynamic Overlay
</div>
<div class="row header">
<div class="label" style="text-align:center">Property</div><div class="formw">Value</div>
</div>
<div class="row first">
<div class="label">ID</div><div class="formw"><input type="text" name="id" /></div>
</div>
<div class="row first">
<div class="label">Header</div><div class="formw"><textarea name="header"></textarea></div>
</div>
<div class="row first">
<div class="label">Body</div><div class="formw"><textarea name="body"></textarea></div>
</div>
<div class="row first">
<div class="label">Footer</div><div class="formw"><textarea name="footer"></textarea></div>
</div>
<div class="row">
<div class="label">Show/Hide Effect(s)</div><div class="formw"><select name="effect">
<option value="">*none*</option>
<option value="YAHOO.widget.ContainerEffect.FADE">Fade</option>
<option value="YAHOO.widget.ContainerEffect.SLIDE">Slide</option>
</select> Duration: <input type="text" name="duration" style="width:25px"/>s</div>
</div>
<div class="row">
<div class="label">Visible</div><div class="formw"><input type="checkbox" name="visible" value="checkbox" checked="true"/></div>
</div>
<div class="row">
<div class="label">x position</div><div class="formw"><input type="text" name="x" /></div>
</div>
<div class="row">
<div class="label">y position</div><div class="formw"><input type="text" name="y" /></div>
</div>
<div class="row">
<div class="label">width</div><div class="formw"><input type="text" name="width" /></div>
</div>
<div class="row">
<div class="label">height</div><div class="formw"><input type="text" name="height" /></div>
</div>
<div class="row">
<div class="label">z-index</div><div class="formw"><input type="text" name="zIndex" /></div>
</div>
<div class="row">
<div class="label">constrain to viewport</div><div class="formw"><input type="checkbox" name="constraintoviewport" value="checkbox" /></div>
</div>
<div class="row">
<div class="label">fix to center of viewport</div><div class="formw"><input type="checkbox" name="fixedcenter" value="checkbox" /></div>
</div>
<div class="row">
<div class="label">Use iframe shim</div><div class="formw"><input type="checkbox" name="iframe" value="checkbox" /></div>
</div>
<div class="row">
<div class="label">Context element</div><div class="formw">ID:<input type="text" name="context" /></div>
</div>
<div class="row">
<div class="label"> </div>
<div class="formw">
Align overlay's
<select name="elementMagnet">
<option value="tl">top left</option>
<option value="tr">top right</option>
<option value="bl">bottom left</option>
<option value="br">bottom right</option>
</select>
corner to context element's
<select name="contextMagnet">
<option value="tl">top left</option>
<option value="tr">top right</option>
<option value="bl">bottom left</option>
<option value="br">bottom right</option>
</select> corner
</div>
</div>
<div class="row last">
<div class="label"></div><div class="formw"><button onclick="create()">create/modify my overlay</button></div>
</div>
</div>
</form>
</body>
</html>
yui.zip( 3,714 k)Related examples in the same category