doevisualizations
Version:
Data Visualization Library based on RequireJS and D3.js (v4+)
110 lines (86 loc) • 3.37 kB
HTML
<html>
<head>
<title></title>
<link href="voverlay.css" rel="stylesheet" />
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="voverlay.js"></script>
<style>
body {
background-color: white;
}
.container {
display: block;
width: 940px;
margin: 0px auto;
background-color: rgb(153, 204, 211);
height: 1024px;
border-radius: 5px;
box-shadow: 0px 0px 10px grey;
border: 1px solid grey;
padding:10px;
}
.example1 {
height: 300px;
width: 1024px;
display: none;
}
.example2, .example3 {
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1>Demo 1: </h1>
<p>This demo launches an overlay by marking and existing dom element for overlay
<input class="launchdemo1" type="button" value="Demo1" />
</p>
<div class="example1">
<p>Showcase overlay on top of overlay</p>
<input class="launchexample2" type="button" value="launch" />
</div>
<div class="example2">
<p class="anothertest">This one is on top another overlay and it dynamically calculates the z indexes to stack them right</p>
</div>
<h1>Demo 2: </h1>
<p>This demo launches an overlay using inline html it also showcases modal options
<input class="launchdemo2" type="button" value="Demo2" />
</p>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
$('.launchdemo1').click(function () {
$('.example1').voverlay('show', { title: false, opacity: "0.24", closeOverride: false, onOpen: function () { console.log('Open event fired for overlay'); }, onClose: function () { console.log('Close event fired for overlay'); } });
});
$('.launchexample2').click(function () {
$('.example2').voverlay('show', {
title: "Test",
closebutton: "yes",
maskopacity: "0.24",
closeOverride: false,
onOpen: function () { console.log('Open event fired for overlay example2'); },
onClose: function () { console.log('Close event fired for overlay example2'); }
});
});
$('.launchdemo2').click(function () {
$.voverlay.show({
html: "Are you sure you want to delete this record?",
title: "Test",
closebutton: "yes",
modalMode: true
});
});
// var one = setTimeout(function () {
// $.voverlay.show({ html: "hello" });
// }, 3000);
// var one = setTimeout(function () {
// $.voverlay.updateContent({ html: "hello anna" });
// }, 6000);
// $('body').click(function (e) {
// $('.example3').voverlay('show', {contextMode: true,clientX :e.clientX, clientY:e.clientY});
// });
});
</script>