WordPress modal

Hello, dear experts! Very interested in the issue of creating a modal window on this blog. No matter how I tried, it doesn’t work. The whole Google was covered. I read about jquery and about a great many different plugins. But nothing sensible has ever happened… I need to make sure that there is a button somewhere on the site on the right side, when you click on it, a window with my text or picture simply appears.

I ask knowledgeable people to tell in detail all the wisdom of creating such a window.


Answer 1, authority 100%

http://jsfiddle.net/deamondz/FE7SK/

HTML

<div class="back"></div>
<div class="popup_window">
    <div class="ppw_cls"></div>
    <!--<div class="ppw_cls right"></div>-->
    <div class="ppw_wrap">lorem ipsum dolor sit amet</div>
</div>
<p><a href="#" class="op">open</a></p>
<p><a href="#" class="op oright">open with right close key</a></p>

CSS

.popup_window{
    position:fixed;
    display:none;
    background:rgba(0,0,0,0.75);
    padding:6px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    z-index:99;
}
.ppw_wrap{
    background:#f8f8f8;
    position:relative;
    padding:10px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
.ppw_cls{
    background:url(https://img217.imageshack.us/img217/1462/ppwclose.png) center no-repeat;
    cursor:pointer;
    display:block;
    position:absolute;
    top:-10px;left:-10px;
    width:30px;
    height:29px;
    z-index:999;
}
.ppw_cls.right{left:auto;right:-10px;}
.back{
    background:rgba(0,0,0,0.75);
    position:absolute;
    top:0px;left:0px;
    display:block;
}

JS

var $ppw = $('.popup_window');
$('.ppw_cls,.back').bind('click', function() {
    $('.back').fadeOut(300);
    $ppw.fadeOut(300);
});
function popup() {
    var ppww = $ppw.width(),
        ppwh = $ppw.height();
    var mww = $(window).width(),
        mwh = $(window).height();
    var ppwl = mww / 2 - ppww / 2,
        ppwt = mwh / 2 - ppwh / 2;
    $ppw.css({
        left: ppwl,
        top: ppwt
    });
    $('.back').css({
        width: mww,
        height: mwh
    }).fadeIn(300);
    $ppw.fadeIn(300);
}
$('.op').bind('click', function() {
    popup();
    $('.ppw_cls').removeClass('right');
    return false;
});
$('.oright').bind('click',function(){$('.ppw_cls').addClass('right')})