Thursday, July 30, 2015

A Simple Image Overlay Example

From jquerytools.org
This example uses jquery 1.2.7. Create a file “test.html” and edit with a text editor. Add the following code.
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Image Overlay Example</title>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>

</head>
    <body>
<p>
<button class="modalInput" rel="#myID">Show Image</button>
<!-- yes/no dialog -->
<div class="modal" id="myID" style="display:none;padding:15px;border:2px solid #333;-webkit-border-radius:6px;">
<image src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" />
<br>
<button class="close">Close</button>
</div>
</p>

<script>
$(document).ready(function() {
$(".modalInput").overlay({
// some mask tweaks suitable for modal dialogs
mask: {
color: '#ebecff',
loadSpeed: 200,
opacity: 0.9
},
closeOnClick: false,
fixed: false
});
  });
</script>
    </body>
</html>