/
index.html
66 lines (63 loc) · 15.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>overlay example</title>
<link rel="stylesheet" href="../dist/overlay.css"/>
<style>
.content {
display: none;
}
.content button {
float: right;
}
</style>
</head>
<body>
<button id="show">Show Overlay</button>
<button id="showBD">Show Overlay with backdropClick = false</button>
<div class="content">
<button data-action="hide">X</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
</div>
<div class="dummy">
<p>Dummy content to show that scroll wheel is disabled when modal is visible</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis commodo congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec mattis lacus. Nam sed metus id massa consequat cursus. In eu dui ut dolor tincidunt cursus. Nunc volutpat, nisi quis semper varius, velit velit dictum orci, nec tristique nisl dolor ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquet faucibus sem euismod viverra. Nulla a eros eget leo bibendum ullamcorper.</p>
</div>
<script src="../bower_components/jquery/jquery.js"></script>
<script src="../bower_components/fidel/dist/fidel.js"></script>
<script src="../dist/fidel.overlay.js"></script>
<script>
$('#show').on('click', function() {
$('.content').overlay();
});
$('#showBD').on('click', function() {
$('.content').overlay({ backdropClick: false });
});
</script>
</body>
</html>