codigo java jquery
/*
* SimpleModal OSX Style Modal Dialog
* http://www.ericmmartin.com/projects/simplemodal/
* http://code.google.com/p/simplemodal/
*
* Copyright (c) 2010 Eric Martin - http://ericmmartin.com
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* Revision: $Id: osx.js 238 2010-03-11 05:56:57Z emartin24 $
*/
jQuery(function ($) {
var OSX = {
container: null,
init: function () {
$("input.osx, a.osx").click(function (e) {
e.preventDefault();
$("#osx-modal-content").modal({
overlayId: 'osx-overlay',
containerId: 'osx-container',
closeHTML: null,
minHeight: 80,
opacity: 65,
position: ['0',],
overlayClose: true,
onOpen: OSX.open,
onClose: OSX.close
});
});
},
open: function (d) {
var self = this;
self.container = d.container[0];
d.overlay.fadeIn('slow', function () {
$("#osx-modal-content", self.container).show();
var title = $("#osx-modal-title", self.container);
title.show();
d.container.slideDown('slow', function () {
setTimeout(function () {
var h = $("#osx-modal-data", self.container).height()
+ title.height()
+ 20; // padding
d.container.animate(
{height: h},
200,
function () {
$("div.close", self.container).show();
$("#osx-modal-data", self.container).show();
}
);
}, 300);
});
})
},
close: function (d) {
var self = this; // this = SimpleModal object
d.container.animate(
{top:"-" + (d.container.height() + 20)},
500,
function () {
self.close(); // or $.modal.close();
}
);
}
};
OSX.init();
});
Codigo Html
<link type='text/css' href='http://pcdmultiformas.webcindario.com/demo.css' rel='stylesheet' media='screen' />
<!-- OSX Style CSS files -->
<link
type='text/css' href='http://pcdmultiformas.webcindario.com/osx.css' rel='stylesheet' media='screen' />
<!-- JS files are loaded at the bottom of
the page -->
</head>
<body OnLoad="preventDefault()" >
<p>{{block type="cms/block" block_id="helloslide"}}</p>
<div class="wired-home">
<div class="promo">
<div class="subscribe"><strong>Regístrese a nuestro boletín</strong>
<p>Y manténgase informado de nuestras promociones y descuentos, hágalo ahora !</p>
{{block type="newsletter/subscribe" template="newsletter/subscribe-home.phtml"}}</div>
<div class="promo-right"><a href="http://www.pcdmultiformas.com.co/index.php/igallery/category/view/id/1/"><img class="last" src="{{skin
url='images/media/promo3.jpg'}}" alt="Promotion 3" /></a></div>
</div>
<div class="subpromo">
<div class="offers"><a href="#"><img src="{{skin url='images/media/promo6.jpg'}}" alt="Promotion 2" /></a><a href="#"><img src="{{skin
url='images/media/promo7.jpg'}}" alt="Promotion 2" /></a></div>
<div class="brands"><a href="#"><img src="{{skin url='images/media/promo5.jpg'}}" alt="Promotion 2" /></a></div>
</div>
<div class="promo-bottom"><a href="#"><img src="{{skin url='images/media/promo4.jpg'}}" alt="Promotion 4" /></a></div>
<div class="featured-social">{{block type="catalog/product_list" category_id="61" template="catalog/product/featured.phtml"}}
<div class="promo-right"><a href="#"><img src="{{skin url='images/media/col_right_callout.jpg'}}" alt="Promotion 2" /></a></div>
</div>
</div>
<input type='button' name='osx' value='Demo' class='osx demo'/> or <a href='#' class='osx'>Demo</a>
<!-- modal content -->
<div id="osx-modal-content">
<div id="osx-modal-title">BIENVENIDOS A PCD MULTIFORMAS</div>
<div class="close">
<a href="#"class="simplemodal-close">x</a></div>
<div id="osx-modal-data">
<h2>Hello! I'm SimpleModal!</h2> <p>SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal
dialog development. Think of it as a modal dialog framework.</p>
<p>SimpleModal gives you the flexibility to
build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development..</p>
<p>As you can see by this example, SimpleModal can be easily configured to behave like an OSX dialog. With a handful options, 2 custom callbacks
and some styling, you have a visually appealing dialog that is ready to use!</p>
<p><button
class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p>
</div>
</div>
</div>
<div id='footer'></div>
<!--Load JavaScript files -->
<script type='text/javascript' src='http://pcdmultiformas.webcindario.com/jquery.js'></script>
<script type='text/javascript'src='http://pcdmultiformas.webcindario.com/jquery.simplemodal.js'></script>
<script type='text/javascript'src='C:\osx.JS'></script>
</body>
</html>
oviamente hay mas codigos pero si estoy seguro los principales son estos
espero ayudas
