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开发者_JS百科 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>
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
This is working for me... I found this method on the jQuery Tools forum and seems to be the best I can find for now.
<script>
function popup() {
if ($("#facebox").hasClass("init")) {
$("#facebox").overlay().load();
}
else {
$("#facebox").addClass("init");
$("#facebox").overlay({
// custom top position
top: 260,
mask: { color: '#838383',
loadSpeed: 200,
opacity: 0.5
},
closeOnClick: true,
load: true
});
}
}
</script>
Simplify:
var overlay;
function overlayDiv()
{
if (typeof overlay === 'undefined')
overlay = $('#facebox').data('overlay').load();
else
overlay.load();
}
You should use:
$(".overlay").remove();
加载中,请稍侯......
精彩评论