How to use Jquery tools Overlay programmatically?
I wan to show an overlay programmatically. I tried to modify the code in this example Opening overlays programmatically. Instead of loading the overlay only once upon document load as shown in this example, I want to show the overlay everytome a user clicks the button. The problem is thatthe overlay is loaded only for the first click. It does not open for the subsequent clicks on the same button
Here is my code.
<html>
<head>
<title>jQuery Tools standalone demo</title>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>
<style>
#facebox {
display:none;
width:400px;
border:10px solid #666;
border:10px solid rgba(82, 82, 82, 0.698);
-moz-border-radius:8px;
-webkit-border-radius:8px;
}
#facebox div {
padding:10px;
border:1px solid #3B5998;
background-color:#fff;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif
}
#facebox h2 {
margin:-11px;
margin-bottom:0px;
color:#fff;
background-color:#6D84B4;
padding:5px 10px;
border:1px solid #3B5998;
font-size:20px;
}
</style>
<script>
var overlayDiv=function(){
$("#facebox").overlay({
api: true,
top: 260,
mask: {
color: '#fff',
loadSpeed: 200,
opacity: 0.5
},
closeOnClick: false,
load: true
})
};
$(document).ready(function() {
$("#triggerBtn").click(function(){
console.log(" I have been CLICKED");
overlayDiv();
});
});
</script>
<body>
<button id="triggerBtn"> Trigger Overlay</button>
<div id="facebox">
<div>
<h2>Facebox</h2>
<p>
This dialog is opened programmatically when the page loads. There is no need for a trigger element.
</p>
<form>
<input type="file" />
</form>
<p style="color:#666">
To close, click the Close button or hit the ESC key.
</p>
<p>
<button class="close"> Close </button>
</p>
</div>
</div>
</body>
Answer
This should do the trick for you.
$("#triggerBtn").click(function(){
console.log(" I have been CLICKED");
$('#facebox').data('overlay').load();
});
More information here - Jquery Tools Overlay Scripting API