<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/dot-luv/jquery-ui.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$("#helpButton").click(function(){
//Initiate color box
$('#help').colorbox({
inline : true,
overlayClose : false,
maxWidth : '520px',
maxHeight : '400px',
width : '95%',
height : '95%',
open:true,
href: "#help"
});
});
});
</script>
</head>
<body>
<a href="#" id="helpButton" class="fa fa-info-circle" >Color Box demo</a>
<div style="display: none;">
<div id="help">
<p>
<span style="font-size: 20px; float: left;">Help</span>
</p>
</div>
</div>
</body>
</html>
Output :-
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/dot-luv/jquery-ui.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$("#helpButton").click(function(){
//Initiate color box
$('#help').colorbox({
inline : true,
overlayClose : false,
maxWidth : '520px',
maxHeight : '400px',
width : '95%',
height : '95%',
open:true,
href: "#help"
});
});
});
</script>
</head>
<body>
<a href="#" id="helpButton" class="fa fa-info-circle" >Color Box demo</a>
<div style="display: none;">
<div id="help">
<p>
<span style="font-size: 20px; float: left;">Help</span>
</p>
</div>
</div>
</body>
</html>
Output :-
No comments:
Post a Comment