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>
<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>
No comments:
Post a Comment