modality.html revision 63a47ff5ac5d4231f3090a83ea11139f74df5f42
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: sans-serif;
font-size:12px;
line-height:18px;
}
.yui3-widget-mask {
background:rgba(0,0,0,0.6);
}
.yui3-widget {
outline:none;
}
#important {
padding:10px;
}
.yui3-overlay {
background:white;
box-shadow: 0 0 5px #333;
padding:15px;
/* outline:none;*/
}
#chart {
margin:10px 10px 10px 10px;
width:90%;
max-width: 800px;
height:200px;
}
</style>
</head>
<body class='yui3-skin-sam'>
<div id="ac">
<label for="ac-input">Enter the name of a US state:</label><br>
<input id="ac-input" type="text">
</div>
<div id="dt"></div>
<div id="chart"></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>
</div>
<input type="button" id="openDTButton" value="Launch Modal Datatable">
<input type="button" id="openChartBtn" value="Launch Modal Chart">
<input type="button" id="OpenOverlayBtn" value="Launch Modal Overlay">
<div id="important">
<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>
</div>
<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", function(Y) {
//Autocomplete
var states = [
'Alabama',
'Alaska',
'Arizona',
'Arkansas',
'California',
];
var ac = new Y.AutoComplete({
inputNode: '#ac-input',
source : states
});
Y.one('#ac-input').plug(Y.Plugin.Modal);
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",
width: '300px',
height: '200px'
}).plug(Y.Plugin.Modal);
//Chart
var myDataValues = [
];
var mychart = new Y.Chart({dataProvider:myDataValues});
//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) {
mychart.render('#chart');
});
Y.one("#OpenOverlayBtn").on('click', function(e){
overlay.set('visible', true);
});
Y.one("#closeOverlayBtn").on('click', function(e) {
overlay.hide();
});
Y.all('.randomLinks').each(function(n) {
n.on('click', function(e) {
alert('clicked');
});
});
});
</script>
</body>
</html>