<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http:///TR/xhtml1/DTD/">
<script src="/tools/js/tools/1.0.2/" ></script>
<style><!--
body {
padding:150px 50px;
font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana;
}
#overlayInfo p{
color:red;
}
--></style><style >body {
padding:150px 50px;
font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana;
}
#overlayInfo p{
color:red;
}</style>
<link rel="stylesheet" type="text/css" href="/tools/css/" />
<script type="text/javascript"><!--
$(function() {
$("button[rel]").overlay({
start:{
width: 300,
absolute: false
},
finish:{
top:10,
left:400,
absolute:false
},
speed:3000,
fadeInSpeed:3000,
closeOnClick: false,
oneInstance:false,
close:'#overlayClose',//Customize the close button
//expose: '#BAD0DB'//Method 1: Set only in a simple background color string
expose: {//Method 2: Set it in the expose function configuration item
color: '#BAD0DB',
opacity: 0.7,
closeSpeed: 1000
},
onBeforeLoad:function(){
//alert(().attr("rel")+":onBeforeLoad");//Show the trigger rel attribute value of the overlay prompt box
},
onLoad:function(){
//alert(().attr("rel")+":onLoad");
},
onBeforeClose:function(){
alert(().attr("rel")+":onBeforeClose");
return false;
}
});
var overlayObj=$("#overlay").overlay({api:true});
();//Automatically display overlay, (no need to trigger, it will automatically trigger when the page loads)
setTimeout(function(){();},2000);//After 2 seconds, the prompt box that automatically loads (appears) is hidden
$("#overlayInfo").append("<P>overlay is opened:"+()+"</p>");//Judge whether the overlay prompt box is displayed at this time
$("#overlayInfo").append("<p>overlay background image:"+()+"</p>");
$("#overlayInfo").append("<p>overlay trigger:"+()+"</p>");
$("#overlayInfo").append("<p>overlay config-speed:"+().speed+"</p>");
$("#overlayInfo").append("<p>overlay content:"+().html()+"</p>");
=function(){
alert(().attr("id"));
}
});
// --></script>
<button rel="#overlay">Open overlay</button>
<button rel="#overlay2">Other overlay</button>
<div class="overlay" >
<h2 style="margin:10px 0">Here is my overlay</h2>
<p style="float: left; margin:0px 20px 0 0;">
<span>$$$$$$$$$$</span>
</p>
<p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Donec lorem ligula, elementum vitae,
imperdiet a, posuere nec, ante. Quisque mattis massa id metus.
</p>
</div>
<div class="overlay" >
<h2 style="margin:10px 0" >Here is my another overlay</h2>
<p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Donec lorem ligula, elementum vitae,
imperdiet a, posuere nec, ante. Quisque mattis massa id metus.
</p>
<div>
<button >close</button>
</div>
</div>
<div ></div>