Skip to content

Instantly share code, notes, and snippets.

/index.html

Created June 2, 2016 19:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/8cf1943bd68df44d80d5e855455c2a3d to your computer and use it in GitHub Desktop.
Save anonymous/8cf1943bd68df44d80d5e855455c2a3d to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/zijipej
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css">
<style id="jsbin-css">
#scroll {
height: 1500px;
}
body {
padding: 50px 0;
}
</style>
</head>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
<div id="scroll">
Just keep scrolling
</div>
<button id="btn">Open Fancybox</button>
<script id="jsbin-javascript">
'use strict';
var template = '\n <div id="popup" >\n <input type="hidden" id="datepicker" value="Click here">\n </div>\n';
$('#btn').on('click', function () {
$.fancybox.open({
content: template,
type: "html",
modal: true,
closeBtn: false,
closeClick: false,
fitToView: false,
width: 'auto',
height: 'auto'
});
$('#datepicker').datepicker({
showOn: 'button'
});
});
</script>
<script id="jsbin-source-css" type="text/css">#scroll {
height: 1500px;
}
body {
padding: 50px 0;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">
let template = `
<div id="popup" >
<input type="hidden" id="datepicker" value="Click here">
</div>
`;
$('#btn').on('click', function() {
$.fancybox.open({
content: template,
type: "html",
modal: true,
closeBtn: false,
closeClick: false,
fitToView: false,
width: 'auto',
height: 'auto'
});
$('#datepicker').datepicker({
showOn: 'button',
});
});
</script></body>
</html>
Raw
jsbin.zijipej.css
#scroll {
height: 1500px;
}
body {
padding: 50px 0;
}
Raw
jsbin.zijipej.js
'use strict';
var template = '\n <div id="popup" >\n <input type="hidden" id="datepicker" value="Click here">\n </div>\n';
$('#btn').on('click', function () {
$.fancybox.open({
content: template,
type: "html",
modal: true,
closeBtn: false,
closeClick: false,
fitToView: false,
width: 'auto',
height: 'auto'
});
$('#datepicker').datepicker({
showOn: 'button'
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment