styles.css


.tooltip {
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 15%;
	padding: 5px 0;
	font-family: Arial, sans-serif;
    width: 100%;
    z-index: 99991;
}
.tooltip h6 {
	font-size: 13px;
	padding: 10px;
	font-weight: normal;
	color: #444444;
	font-family: Arial, sans-serif;
}
.tooltip > .container {
    overflow: hidden;
	width: 600px;
    height: auto;
    padding-top: 0;
    background: #fff;
    position: relative;
    box-shadow: 0 0 0 5px rgba(0,0,0,0.15);
    margin: 0 auto 0 auto;
}

.tooltip .close {
    color: #1a2f43;
    cursor: pointer;
    float: right;
    margin: 7px 14px 0 0;
	font-weight: bold;
    opacity: 0.3;
	font-size: 15px;
    position: absolute;
    right: 0;
}

.tooltip .close:hover {
    opacity: 0.5;
}

utworzy plik action.js i dodaj go do headera :) Tutaj jego kod:

jQuery(document).ready(function() {

    $('.close').click(function () {
        jQuery('.tooltip,.tooltip .container').animate({'opacity': '0'}, 300, 'linear', function () {
            jQuery('.tooltip,.tooltip .container').css('display', 'none');
        });
    });

});

A do htmla dodaj:

	<div class="tooltip">
        <div class="container">
            <div class="close">x</div>
            <h6>Reklama</h6>
            <div class="content">
				<img src="urbancity_600x400zzz.jpg" alt="" />
            </div>
        </div>
    </div>