modality.html revision dcd96d6eae6d34898f9193fe57d0058fa3173374
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: sans-serif;
font-size:12px;
line-height:18px;
}
#desc {
margin-bottom:20px;
border-bottom:1px dotted #333;
}
#desc span {
background:#fffcb2;
padding:2px;
}
#yui3-widget-mask {
background:rgba(0,0,0,0.6);
}
.yui3-widget {
/*outline:none;*/
}
.yui3-overlay {
background:white;
box-shadow: 0 0 5px #333;
padding:15px;
border-radius:5px;
/* outline:none;*/
}
#chart {
margin:10px 10px 10px 10px;
width:90%;
max-width: 800px;
height:200px;
display:none;
}
</style>
</head>
<body class='yui3-skin-sam'>
<div id="desc">
<span><code>Y.Plugin.Modal</code> is a widget-level plugin that can be used by any widget. It makes that widget appear modally. This means that you cannot interact with any elements on the page apart from the widget. It fires events when the mask is opened and closed.</span>
</div>
<div id="ac">
<input id="ac-input" type="text">
</div>
<div id="dt"></div>
<div id="chart"></div>
<div id="dial"></div>
<div id="overlay">
Here's some content that should go into a modal overlay. Let's see if it works...
<p><input type="button" id="closeOverlayBtn" value="Close Overlay"></p>
<p><input type="button" id="openNestedOverlayBtn" value="Open Nested Overlay"></p>
</div>
<p>
<input type="button" id="openDTButton" value="Launch Modal Datatable">
<input type="button" id="openChartBtn" value="Launch Modal Chart">
<input type="button" id="openDialBtn" value="Launch Modal Dial">
<input type="button" id="OpenOverlayBtn" value="Launch Modal Overlay">
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elit mi, tempus in tincidunt non, imperdiet sed augue. Nullam turpis magna, gravida vel venenatis at, dignissim non augue. Phasellus posuere erat nec ligula consectetur nec facilisis purus consectetur. Integer ipsum nisi, aliquam at ultrices quis, dictum a mauris. Ut posuere ultrices justo non convallis. Nunc a diam et est pretium fermentum. Nunc eget nunc non odio vestibulum vehicula et faucibus neque. Praesent turpis ligula, pharetra id vehicula a, sollicitudin sit amet lectus. Pellentesque pellentesque ante sed leo congue ullamcorper. Praesent at metus nisl. Vivamus at tortor sed sapien aliquet volutpat. Suspendisse vehicula, dolor ac vestibulum dapibus, nisi nulla ultrices odio, ac fermentum dolor risus congue tortor. Sed vel ligula in justo lacinia condimentum vel id est. Suspendisse interdum ligula quis odio congue consequat. Suspendisse potenti. Cras id accumsan eros. Duis gravida metus ac diam volutpat et dignissim justo pulvinar. Duis semper ornare dui, non condimentum nibh pretium id. Aenean dapibus purus eu nisl hendrerit a malesuada dolor vehicula.</p>
<p>Nullam et enim id lectus rhoncus convallis. Vivamus molestie diam sed est hendrerit condimentum. Phasellus fringilla libero a ligula aliquet placerat. Aliquam consectetur dignissim purus non scelerisque. Integer vel sem eu lacus tincidunt auctor. Vivamus vitae lobortis urna. Suspendisse potenti. Donec hendrerit viverra felis, in faucibus odio scelerisque eu. Vestibulum sem velit, posuere at pulvinar semper, ornare ut felis. Etiam at consectetur mi. Sed id nisi est, ac feugiat eros. Nulla facilisi. Ut porttitor tellus sit amet diam consequat ac sagittis lacus porta. Suspendisse nibh justo, fringilla a congue id, faucibus sed nibh. Sed vitae lorem mattis lectus ultrices suscipit eu ac mauris.</p>
<a href="#a" class="randomLinks">Random Link 1</a>
<a href="#b" class="randomLinks">Random Link 2</a>
<a href="#c" class="randomLinks">Random Link 3</a>
<a href="#d" class="randomLinks">Random Link 4</a>
<script>
YUI({filter:'raw'}).use('widget-modality', 'overlay',"autocomplete", "autocomplete-filters", "autocomplete-highlighters","datatable-base","charts","dial", function(Y) {
//Autocomplete
var states = [
'Alabama',
'Alaska',
'Arizona',
'Arkansas',
'California',
];
var ac = new Y.AutoComplete({
inputNode: '#ac-input',
source : states
});
ac.render();
//DataTable
var cols = ["id","name","price"],
data = [
{id:"ga-3475", name:"gadget", price:"$6.99"},
{id:"sp-9980", name:"sprocket", price:"$3.75"},
{id:"wi-0650", name:"widget", price:"$4.25"}
],
dt = new Y.DataTable.Base({
columnset: cols,
recordset: data,
summary: "Price sheet for inventory parts",
caption: "Example table with simple columns"
}).plug(Y.Plugin.Modal);
//Charts
var myDataValues = [
];
var mychart = new Y.Chart({dataProvider:myDataValues});
//Dial
var dial = new Y.Dial({
min:-220,
max:220,
stepsPerRev:100,
value: 30,
});
//Overlay
var overlay = new Y.Overlay({
srcNode: "#overlay",
width: 300,
height: 300,
visible: false,
centered: true
});
Y.one("#openDTButton").on('click', function(e) {
dt.render("#dt");
});
Y.one('#openChartBtn').on('click', function(e) {
Y.one('#chart').setStyle('display', 'block');
mychart.render('#chart');
});
Y.one('#openDialBtn').on('click', function(e) {
dial.render('#dial');
});
Y.one("#OpenOverlayBtn").on('click', function(e){
overlay.set('visible', true);
});
Y.one("#closeOverlayBtn").on('click', function(e) {
overlay.hide();
});
Y.one('#openNestedOverlayBtn').on('click', function(e) {
var nest = new Y.Overlay({
headerContent:"My Overlay Header",
bodyContent:"My Overlay Body",
footerContent:"My Footer Content",
visible:true,
width:350,
height:150,
zIndex: 2,
centered: true
});
nest.render();
});
Y.all('.randomLinks').each(function(n) {
n.on('click', function(e) {
alert('clicked');
});
});
});
</script>
</body>
</html>